jQuery DataTables - Responsive and Select extensions
For more information, see
http://www.gyrocode.com/articles/jquery-datatables-responsive-and-select-extensions/
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.12/r-2.1.0/se-1.2.0/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.12/r-2.1.0/se-1.2.0/datatables.min.js"></script>
<h3><a href="http://www.gyrocode.com/articles/jquery-datatables-responsive-and-select-extensions/">jQuery DataTables - Responsive and Select extensions</a></h3>
<a href="http://www.gyrocode.com/articles/jquery-datatables-responsive-and-select-extensions/">See full article on Gyrocode.com</a>
<hr><br>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th class="none">Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
JavaScript
$(document).ready(function() {
var table = $('#example').DataTable({
'ajax': 'https://api.myjson.com/bins/qgcu',
'responsive': {
'details': {
'type': 'column',
'target': 0
}
},
'columnDefs': [
{
'data': null,
'defaultContent': '',
'className': 'control',
'orderable': false,
'targets': 0
}
],
'columns': [
{ 'data': null },
{ 'data': 0 },
{ 'data': 1 },
{ 'data': 2 },
{ 'data': 3 },
{ 'data': 4 },
{ 'data': 5 }
],
'select': {
'style': 'multi',
'selector': 'td:not(.control)'
},
'order': [[1, 'asc']]
});
setInterval(function(){
table.ajax.reload();
}, 5000);
});