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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - 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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T23:59:28+0000

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

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags