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

当datatable显示前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按钮切换选择全部/选择无。现在我们不必将两个函数绑定到一个按钮上。

我们将在选择all后立即创建此按钮，并在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;
        }
    }
} ),

现在我们可以通过调用它来应用我们的select all / none切换，就像我们任何TableTools按钮一样。在我们的表工具init：

"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控制器放入表头。如果您没有使用bootstrap，请考虑在CSS中执行类似的操作（link），代码应该可以正常工作。

如果一切顺利，你的结果应该是：http://screencast.com/t/c3ZDi0mmiGj

最大的便利是定位复选框：来自行内任何位置的已检查属性，而不仅仅是单击复选框。对高分辨率用户或移动触摸/触摸开始有帮助。

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
fnSelect
fnSelectAll
fnSelectNone

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

Answer 5

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

jQuery数据表checkall

5 个答案: