Menu
I have HTML page which have multiple checkboxes and individually they can be checked. I have button for "Select All" and when I click on this button all the checkboxes should get selected, and when I click again on the same button all the checkboxes should get deselected from all pages.
In my original program there are thousands of records, but at a time 10 records are getting display, but when user click on select it should select all thousands record.
I am using jQuery Datatables plug-in for displaying the data. It provides pagination, searching, sorting etc. so at a time I am displaying only 10 records on my current page. if I click on next or page number which is provided by Bootstrap Datatable another 10 records will be displayed. As mention in the problem I want to select all check-boxes from all the pages.
$(document).ready(function () {
$('body').on('click', '#selectAll', function () {
if ($(this).hasClass('allChecked')) {
$('input[type="checkbox"]', '#example').prop('checked', false);
} else {
$('input[type="checkbox"]', '#example').prop('checked', true);
}
$(this).toggleClass('allChecked');
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>monitoring</title>
<script src="jquery.js"></script>
</head>
<body>
<table id="example" class="myclass">
<thead>
<tr>
<th>
<button type="button" id="selectAll" class="main">
<span class="sub"></span> Select </button></th>
<th>Name</th>
<th>Company</th>
<th>Employee Type</th>
<th>Address</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/>
</td>
<td>varun</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Rahuk</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>johm Doe</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Sam</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Lara</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Jay</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Tom</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
</tbody>
</table>
</body>
</html>
374
nodes(); // Check/uncheck checkboxes for all rows in the table $('input[type="checkbox"]', rows). prop('checked', this. checked); }); // Handle click on checkbox to set state of "Select all" control $('#example tbody'). on('change', 'input[type="checkbox"]', function(){ // If checkbox is not checked if(!
In order to select all the checkboxes of a page, we need to create a selectAll () function through which we can select all the checkboxes together. In this section, not only we will learn to select all checkboxes, but we will also create another function that will deselect all the checked checkboxes.
Try this code instead:
$(document).ready(function () {
var oTable = $('#example').dataTable({
stateSave: true
});
var allPages = oTable.fnGetNodes();
$('body').on('click', '#selectAll', function () {
if ($(this).hasClass('allChecked')) {
$('input[type="checkbox"]', allPages).prop('checked', false);
} else {
$('input[type="checkbox"]', allPages).prop('checked', true);
}
$(this).toggleClass('allChecked');
})
});
The magic should happen in fnGetNodes():
fnGetNodes(): Get an array of the TR nodes that are used in the table's body
Edit
This alternative solution is mostly for debugging (to see if it works). Hardly optimal code:
$(document).ready(function () {
var oTable = $('#example').dataTable({
stateSave: true
});
var allPages = oTable.cells( ).nodes( );
$('#selectAll').click(function () {
if ($(this).hasClass('allChecked')) {
$(allPages).find('input[type="checkbox"]').prop('checked', false);
} else {
$(allPages).find('input[type="checkbox"]').prop('checked', true);
}
$(this).toggleClass('allChecked');
})
});
Use datatable $ instance for selections https://datatables.net/docs/DataTables/1.9.4/#$
$(document).ready(function () {
var oTable = $('#example').dataTable({
stateSave: true
});
$("#selectAll").on("change", function(){
oTable.$("input[type='checkbox']").attr('checked', $(this.checked));
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
