varun varun - 17 days ago 7
HTML Question

How can I select all checkboxes from all the pages in a jQuery DataTable

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>




Answer

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');
    })
});    
Comments