如何从 jQuery DataTable 中的所有页面中选择所有复选框

Posted 2023-05-07

技术标签:

【中文标题】如何从 jQuery DataTable 中的所有页面中选择所有复选框【英文标题】：How can I select all checkboxes from all the pages in a jQuery DataTable 【发布时间】：2015-07-05 22:57:43 【问题描述】：

我的 html 页面有多个复选框，可以单独检查它们。我有“全选”按钮，当我点击这个按钮时，所有的复选框都应该被选中，当我再次点击同一个按钮时，所有的复选框都应该被取消选择从所有页面。

在我的原始程序中有数千条记录，但一次显示 10 条记录，但是当用户单击选择时，它应该选择所有数千条记录。

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

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

【问题讨论】：

Select all check boxes using button的可能重复 table标签不是自闭合标签，请更改<table id="example" class="myclass"/>并删除/ 你发布了同样的问题***.com/questions/29841547/… 和***.com/questions/29823843/…？ 在相同的问题上使用编辑链接 您的代码应该可以工作。您能否分享您遇到的错误或您面临的问题？您为什么再次发布相同的问题，请编辑您之前的问题或告诉我们您面临的实际问题。 @varun。 所有页面是什么意思，你的完整表格不是一页吗？您如何在不同的页面中显示您的表格？请在您的问题中添加此信息，以便此处的 ppl 可以为您提供更好的帮助。 【参考方案1】：

试试这个代码：

$(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()：获取用于表体的 TR 节点数组

编辑

这个替代解决方案主要用于调试（看看它是否有效）。几乎不是最优代码：

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

【讨论】：

很抱歉这么笨，但你能帮我解决这个问题吗？我对此完全陌生。或者只是给出一个想法我该怎么做 @varun 我已经稍微更新了这两个代码 - 因为较新版本的 DataTables 显然使用了另一种选项定义。你是天才。最后你做到了。第一个代码终于成功了请注意，如果您使用DataTable.select 并输出x rows selected，这将不起作用。在 Datatables 注册它之前，需要实际触发复选框。这很好，直到我们不搜索任何东西。如果我们使用任何过滤器或搜索，那么全选选项就会消失。过滤后是否也可以使用全选选项？【参考方案2】：

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

【讨论】：

这个选项使用起来非常干净，我自己也用过，不过需要更新为$(this).is(":checked")【参考方案3】：

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>

【讨论】：

它工作了吗？你可以运行上面的代码sn-p。不要忘记在自己的 sn-p 中添加 jquery 库！我已经在我的代码中包含了 jQuery 库，但它仍然无法正常工作我什至用你的代码试过了，效果也很好。也许您可以向我们提供失败消息？我想说这实际上比原始代码差了一步（好吧，我写了他使用的函数，所以我有偏见）;）但这并没有解决用户的请求：如何从所有页面中选择/取消选择【参考方案4】：

试试这个，

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

【讨论】：

【参考方案5】：

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

【讨论】：

【参考方案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);
    
);

【讨论】：

请考虑对您的答案提供简短的解释，以便更好地理解

以上是关于如何从 jQuery DataTable 中的所有页面中选择所有复选框的主要内容，如果未能解决你的问题，请参考以下文章

如何从jquery更新datatable对象

复选框和检查Datatable Jquery PHP Mysql中的所有功能

如何根据值更改jquery dataTable中的行颜色

如何从 jQuery Datatable 中获取过滤后的数据结果集

如何遍历 DataTables jQuery 中的所有行？

如何在 asp.net 中使用 JSON 和 JQuery 从 WebMethod 返回 DataTable？