我如何 select 来自 jQuery DataTable 中所有页面的所有复选框

Question

我的 HTML 页面有多个复选框，可以单独选中它们。我有“Select All”的按钮，当我点击这个按钮时，所有复选框都应该得到 selected，当我再次点击同一个按钮时所有页面.

的所有复选框都应该取消selected
在我的原始程序中有几千条记录，但一次显示 10 条记录，但是当用户单击 select 时，它应该 select 所有几千条记录。

我正在使用 jQuery Datatables plug-in 来显示数据。它提供分页、搜索、排序等功能，因此一次我在当前页面上只显示 10 条记录。如果我单击下一步或 Bootstrap 数据表提供的页码，将显示另外 10 条记录。正如问题中提到的，我想 select 所有页面的所有复选框。

$(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 1

DEMO

最简单的方法是使用以下 jQuery 代码：

//EDIT 第二次单击时，您现在删除所有选中的框。

$('#selectAll').click(function(e) {
    if($(this).hasClass('checkedAll')) {
      $('input').prop('checked', false);   
      $(this).removeClass('checkedAll');
    } else {
      $('input').prop('checked', true);
      $(this).addClass('checkedAll');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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 2

试试这个，

   if ($(this).hasClass('allChecked')) {
     $('input[type="checkbox"]').prop('checked', 'checked')
   } else {
     $('input[type="checkbox"]').prop('checked', 'false')
   }

Answer 3

试试这个代码：

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

奇迹应该发生在 fnGetNodes():

fnGetNodes(): Get an array of the TR nodes that are used in the table's body

编辑

此替代解决方案主要用于调试（查看是否有效）。几乎没有最佳代码：

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

Answer 4

使用数据表 $ 实例进行选择 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));  
    });
});

Answer 5

使用 dataTables.checkboxes.min.js 并使用 "selectAllPages" : false 。它应该用于选择每个页面记录。

Answer 6

var oTable = $('#myTable').DataTable({
    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']]
    // stateSave: true
});
$('#selectAll').on('change', function() {
    oTable.$('.student_id:checkbox').prop('checked', $(this).prop('checked'));
});

jQuery(document).on('change', '.student_id', function() {
    if (jQuery(this).is(':checked')) {
        if (jQuery('.student_id:checked').length == jQuery('.student_id').length) {
            jQuery('#selectAll').prop('checked', true);
        } else {
            jQuery('#selectAll').prop('checked', false);
        }
    } else {
        jQuery('#selectAll').prop('checked', false);
    }
});

我如何 select 来自 jQuery DataTable 中所有页面的所有复选框

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

html

javascript

jquery

jquery-datatables