jQuery DataTables – Row selection using checkboxes
Example for article at
http://www.gyrocode.com/articles/jquery-datatables-checkboxes/
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.12/se-1.2.0/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.1.0/js/dataTables.checkboxes.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.12/se-1.2.0/datatables.min.css">
<link rel="stylesheet" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.1.0/css/dataTables.checkboxes.css">
<table id="example" class="datatable table striped hovered cell-hovered border bordered" cellspacing="0">
<thead>
<tr>
<th></th>
<th>City</th>
<th>Student Id</th>
<th>Name</th>
<th>Class</th>
<th>Instructor</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>New York</td>
<td>22621</td>
<td>John</td>
<td>ENC 101</td>
<td>Dr. Doe</td>
</tr>
<tr>
<td></td>
<td>Chicago</td>
<td>22621</td>
<td>John</td>
<td>MAT 101</td>
<td>Dr. Smith</td>
</tr>
<tr>
<td></td>
<td>Miami</td>
<td>21176</td>
<td>Mike</td>
<td>PSY 101</td>
<td>Dr. Staff</td>
</tr>
<tr>
<td></td>
<td>New York</td>
...
JavaScript
$(document).ready(function (){
$('#example').DataTable({
columnDefs: [{
targets: 0,
data: 2,
'checkboxes': {
'selectRow': false
}
},
{ "visible": false, "targets": 1 }],
select: {
style: 'multi'
},
order: [[1, 'asc']],
iDisplayLength: 10,
drawCallback: function () {
var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();
var last = null;
api.column(1, { page: 'current' }).data().each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="group"><td colspan="6">' + group + '</td></tr>'
);
last = group;
}
});
}
});
});