jQuery DataTables
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<h3>jQuery DataTables</h3>
<a href="https://www.gyrocode.com/articles/tag/jquery-datatables/">See more articles about jQuery DataTables</a> on <a href="https://www.gyrocode.com/articles/">Gyrocode.com</a><hr>
<table id="eventsTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Checkbox
<input type="checkbox" id="checkall" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>
<input type="checkbox" id="checkbox1" />
</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>
<input type="checkbox" id="checkbox2" />
</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>
<input type="checkbox" id="checkbox3" />
</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>
<input type="checkbox" id="checkbox4" />
</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>
<input type="checkbox" id="checkbox5" />
</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>
<input type="checkbox" id="checkbox6" />
</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>
<input type="checkbox" id="checkbox7" />
</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>
<input type="checkbox" id="checkbox8" />
</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>
<input...
JavaScript
$(document).ready(function () {
$.extend($.fn.dataTable.defaults, {
"columns": [null, {
"orderable": false
}]
});
$('#eventsTable').DataTable();
});
$("#checkall").on('click', function () {
$('#eventsTable').DataTable()
.column(1)
.nodes()
.to$()
.find('input[type=checkbox]')
.prop('checked', this.checked);
});