jQuery 数据表检查

Question

HTML

<div class="box">
<table id="Datatable">
    <thead>
       <tr>
         <th><input name="checkall" type="checkbox" class="checkall" value="ON" /></th>
         <th>field</th>
         <th>field</th>
         <th>field</th>
         <th>field</th>
         <th>field</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <th class="checkers"><input type="checkbox" name="selected[]"/></th>
        <td>value</td>                                          
        <td>value</td>  
        <td>value</td>  
        <td>value</td>  
        <td>value</td>  
      </tr>
   </tbody>
</table>
</div>

我正在尝试使用此代码使 checkall 复选框选中所有复选框：

$('.checkall').click(function () {
        var checkall =$(this).parents('.box:eq(0)').find(':checkbox').attr('checked', this.checked);
        $.uniform.update(checkall);
    });

由于数据表显示前 10、20、30 ... 等行并从 DOM 中删除其他行以进行分页，因此此 jQuery 代码仅选择当前页面中的行。那么无论如何我可以选择所有复选框吗？

Answer 1

我的解决方案也有效：

$('.checkall').click(function(e) {

          var chk = $(this).prop('checked');

          $('input', oTable.fnGetNodes()).prop('checked',chk);
        });

如果你想只检查过滤（如果你使用 dom 在数据表中过滤），那么你可以使用这个，只检查过滤

$('.checkall').click(function(e) {

          var chk = $(this).prop('checked');

          $('input', oTable.$('tr', {"filter": "applied"} )).prop('checked',chk);
        });

Answer 2

我找到了解决办法

$('.checkall', oTable.fnGetNodes()).click(function () {

Answer 3

旧线程，但我有一些贡献。

要自动生成复选框列而不是内联，请将其添加到列定义中：

"aoColumnDefs": [ { "mRender": function (data, type, full) { 
    return '<input type="checkbox" id="id" class="class" value="' + data + '">'; },  "aTargets": [0] } ]

// Note: aTargets is the zero-indexed array determining placement of the checkbox column
// "aTargets": [0] gives you the first column (first from left)

正如 RUN-CMD 建议的那样，您可以使用 TableTools 来处理行选择，但这对操作没有帮助，因为选择/突出显示所有行与检查行的输入是分开的。但是，它是一个很好的视觉增强器。

我们可以通过将此代码添加到 TableTools.js 中的 _fnRowSelect() 函数以编程方式检查行的复选框（函数是我文件中的第 1079 - 1119 行）：

// This marks them as selected
    for ( i=0, len=data.length ; i<len ; i++ )
    {
        data[i]._DTTT_selected = true;

        if ( data[i].nTr )
        {
            $(data[i].nTr).addClass( that.classes.select.row );
            // Now if there's a checkbox somewhere in the row - we check it
            $(data[i].nTr).closest("tr").find('input[type="checkbox"]').prop('checked', 'checked');
        }
    }

在我们编辑这个文件的同时，让我们创建一个新的 TableTools 按钮来切换全选/全选。现在我们不必将两个功能都绑定到一个按钮上。

我们将在 TableTools.js 中的全选和全选按钮之后立即创建此按钮（从我的文件中的第 2393 行开始）：

/* Combines select_all and select_none buttons
 * Default button text is a checkbox
 * to strip button style and use a checkbox alone put this on native page: 
 * $(".select-all-master").removeClass("btn");
 */
"select_master": $.extend( {}, TableTools.buttonBase, {
    "sButtonText": '<input type="checkbox" id="master_check" class="row_checks master_check" value="">',
    "sButtonClass": "select-all-master",
    "sAction": "div",
    "sTag": "div",
    "fnClick": function( nButton, oConfig ) {
        var that = this;
        var selected = false;
        $("table tr").each(function(i) {
            if ($(this).hasClass("active")) {
                selected = true;
            }
        });
        if (selected==false) {
            that.fnSelectAll();
            $("#master_check").prop('checked', 'checked');
        }
        if (selected==true) {
            that.fnSelectNone();
            $("#master_check").prop('checked', '');
            selected = false;
        }
    }
} ),

现在我们可以通过调用它来应用我们的全选/无切换，就像我们调用任何 TableTools 按钮一样。在我们的表格工具初始化中：

"aButtons": [ { "sExtends": "select_master","sToolTip": "Tool tip to display on checkbox hover" } ]

您也可以在本机数据表 init 中使用：

Javascript：

$(document).ready(function() {
    $(".select-all-master").appendTo("thead#selectallbtn");
    $(".select-all-master").removeClass("btn");
});

html:

<thead class="selectallbtn"></thead>

如果您想删除按钮样式并将其作为普通复选框 all/none 控制器放入表头中。 如果您不使用引导程序，请考虑在您的 CSS 中执行类似 (link) 的操作，代码应该可以正常工作。

假设一切顺利，结果应该是这样的：http://screencast.com/t/c3ZDi0mmiGj

最大的便利是从行内的任何位置定位 checkbox :checked 属性，而不仅仅是单击复选框。对高分辨率用户或移动 touchpunch / touchstart 很有帮助。

Answer 4

datatables 提供了一个包含此功能的插件“TableTools”。

http://datatables.net/extras/tabletools/

以下是单选和多选的行选择示例：

http://datatables.net/release-datatables/extras/TableTools/select_single.html

http://datatables.net/release-datatables/extras/TableTools/select_multi.html

此外，当您在激活 TableTools 插件的情况下初始化数据表时，您可以访问以下 API 方法：

• fnIsSelected
• fn选择
• fnSelectAll
• fnSelectNone

API 方法记录在这里：
http://datatables.net/extras/tabletools/api

Answer 5

我认为这是不可能的，我会使用另一个参数来通知服务器所有记录都已检查。通过这种方式，您可以在服务器端实现检查所有逻辑。