two way communication ui as dataTable

by Prasanth AR

HTML

<div id="tTimeTableCreationPnl">
<div class="content_title">
		<h2>Message Inbox</h2>
	</div>
	<div class="clear"></div>
	<div id="main-content">
		<div class="content-box">
			
				<div align="justify">
                    
                    	<table class="menutab">
						<thead>
							<tr>
								<th style="border: none;">&nbsp;</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th>Compose</th>
							</tr>
							<tr>
								<th>Message Box</th>
							</tr>
							<tr>
								<th>Sent Messages</th>
							</tr>
							<tr>
								<th>Trash</th>
							</tr>
							<tr>
								<th>All Message</th>
							</tr>
							<tr>
								<th>Draft</th>
							</tr>
						</tbody>
					</table>
<table class="mail-content" id="TeacherDailyReportDateByDate"></table>
	<table><tbody><tr><td><input type="button" id="btnViewFreePeriodTeachers" value="ViewTeacherList" style="width: auto; display: none;" onclick="findFreeTeachersInSelectedPeriod();"></td></tr></tbody></table></div>
				<div id="divTeacherFreePeriod" style="display: none;"><table id="tblListFreePeriodTeachers"></table><input type="hidden" id="hdnTeacherId"></div>
				<div id="divFreePeriodList" style="display:none"><table id="tblTeacherFreePeriodList"></table>
                 	</div>
				
		</div>

CSS

.menutab{
	margin-top: 10px;
	width: 200px !important;
	float: left;
	border-right: 1px solid rgb(209,209,209) !important;
}
.mail-content{
	width: 690px !important;
	left: 15px;
	position: relative;
}
.mail-content thead tr th{
	border-bottom: 1px solid rgb(209,209,209) !important;
}
th,.msg-name{
	text-align: left;
}
.msg-name span{
	margin-top: -5px;
	width: 140px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: absolute;
}
.mail-content tbody tr td{
	border-bottom: 1px solid rgb(225,225,225) !important;
}
/*.msg-date{
	width: 50px;
	position: relative;
}*/
/*table,th,td,thead,tbody,*/
/*#main-content{
	background: rgb(235,235,235) !important;
}*/
table,tr,th,td,thead,tbody,.content-box div{
	background: rgb(235,235,235) !important;
	/*background: rgb(209,209,209) !important;
	background: rgb(225,225,225) !important;*/
}

/*.mail-content thead tr th input[type=checkbox],
.mail-content tbody tr td input[type=checkbox]
{
	float: left;
	margin-top: 8px;
	left: 34px;
	position: relative;
}*/
.menutab tbody tr th{
	float: left;
	padding-left: 34px !important;
	margin-left: 10px;
	position: relative;
	border-bottom: 1px solid rgb(209,209,209);
	width: 70%;
}
.msg-content input,.msg-content>span{
	float: left;
	left: 34px;
	position: relative;
}
.msg-content{
	width: 316px;
}
.msg-date>span{
	float: right;
	margin-right: 10px;
}
.msg-date div{
	float: right;
	max-width: 154px;
}
input{
	  margin-right: 10px;
}
.msg-content span{
	text-align: left;
	width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

JavaScript

var dataTableData='<thead><tr><th><input type="checkbox"><span>All Select</span></th><th class="msg-content"><input id="test1" name="test1" type="image" src="images/menu.png" alt=""><input id="test2" name="test1" type="image" src="images/delete.png" alt=""></th><th class="msg-date">	<div><span>1-15</span><input id="test3" name="test1" type="image" src="images/next1.png" alt=""><input id="test4" name="test1" type="image" src="images/next2.png" alt=""></div></th></tr></thead><tbody><tr><td class="msg-name">	<input type="checkbox"><span class="">VINEESH C</span></td><td class="msg-content">	<span>New SignIn-New Form...</span></td><td class="msg-date">	<span>3:58 PM</span></td></tr><tr><td class="msg-name"><input type="checkbox"><span class="">VINEESH C</span></td><td class="msg-content"><span>New SignIn-New Form...</span></td><td class="msg-date"><span>3:58 PM</span></td></tr><tr><td class="msg-name"><input type="checkbox"><span class="">VINEESH C</span></td><td class="msg-content"><span>New SignIn-New Form...</span></td><td class="msg-date"><span>3:58 PM</span></td></tr><tr> <td class="msg-name"><input type="checkbox"><span class="">VINEESH C</span></td><td class="msg-content"><span>New SignIn-New Form...</span></td><td class="msg-date"><span>3:58 PM</span></td></tr><tr><td class="msg-name"><input type="checkbox"><span class="">VINEESH C</span></td><td class="msg-content"><span>New SignIn-New Form...</span></td><td class="msg-date"><span>3:58 PM</span></td></tr><tr><td class="msg-name"><input type="checkbox"><span class="">VINEESH C</span></td><td class="msg-content"><span>New SignIn-New Form...</span></td><td class="msg-date"><span>3:58 PM</span></td></tr></tbody>';

$('#TeacherDailyReportDateByDate').append(dataTableData);
$('#TeacherDailyReportDateByDate').dataTable({
			bDestroy : true,
			bRetrieve : true,
			scrollX: true,
           
	});