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

【问题标题】：How can I select all checkboxes from all the pages in a jQuery DataTable如何从 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"/>并删除/
你发布了同样的问题stackoverflow.com/questions/29841547/… 和stackoverflow.com/questions/29823843/…？ 在相同的问题上使用编辑链接
您的代码应该可以工作。您能否分享您遇到的错误或您面临的问题？您为什么再次发布相同的问题，请编辑您之前的问题或告诉我们您面临的实际问题。
@varun。 所有页面是什么意思，你的完整表格不是一页吗？您如何在不同的页面中显示您的表格？请在您的问题中添加此信息，以便此处的 ppl 可以为您提供更好的帮助。

标签： javascript jquery html jquery-datatables

【解决方案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);
    }
});

【讨论】：

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