jQuery Datatables responsive
by Noble M O
HTML
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
<div class="table_bg table-responsive">
<table id="userTable" class="table table-striped table-hover table-bordered dt-responsive display nowrap res_table" cellspacing="0" width="100%">
<thead>
<tr>
<th>User ID</th>
<th>Full Name</th>
<th>E-Mail</th>
<th>Fax</th>
<th>Allow Logon</th>
<th>Password Never Expires</th>
<th>Preferred Database</th>
<th>External Users</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
JavaScript
//$(document).ready(function() {
getUsers();
function getUsers() {
var table = $('#userTable').DataTable({
"responsive": true,
"paging": false,
"ordering": false,
"info": false,
"searching": false,
"scrollY": '48vh',
'fnInitComplete': function (oSettings) {
//getUsers();
}
})
var model = {
"UserId":"#PETER",
"FullName":"Peter Perera Manavalan", "Email":"[email protected]",
"Fax":null,
"LoginEnabled":true,
"PasswordNeverExpire":false,
"IsExternal":true,
"PreferredDatabase":null,
"Password":null,
"Location":null,
"UserNos":0
};
var rowNode = table.row.add([
model.UserId,
model.FullName,
model.Email,
model.Fax,
model.LoginEnabled,
model.PasswordNeverExpire,
model.PreferredDatabase,
model.IsExternal
]).draw().node();
}
//} );