在 DataTable 中勾选所有复选框，包括隐藏行。

Question

在 DataTable 中勾选所有复选框，包括隐藏行。

7

我将尝试制作一个函数，用于检查数据表中的所有复选框，包括隐藏行。以下是“复选框”列的HTML代码：

<div class="usersTable" id="userTable">
    <table cellpadding="0" cellspacing="0" id="customersList" >
        <thead>
            <tr>
                <th><input type="checkbox" name="selectall" id="selectall" class="selectall"/></th>
                <th width="200">val1</th>
                <th width="80px">val2</th>
                <th width="70px">val3</th>
                <th width="450">val4</th>
                <th width="60px">val5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

提交按钮：

<input type='button' value='select all' id='selectallboxes' name='selectallboxes' />

以下是不起作用的JQuery代码：

$(function () {         
    otable = $('#customersList').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aLengthMenu" : [ [10,20,50,100,1000], [10,20,50,100,1000] ],
        "iDisplayLength": 100,
        "bProcessing": true,
        "bServerSide": true,
        "aaSorting":[],         
        "iDisplayStart": 0,
        "sAjaxSource": "filename",
        ....

$("#selectallboxes").click ( function () {
        alert(dt.fnGetNodes().length + ' is total number')
        var selected = new Array();
        $('input', dt.fnGetNodes()).each( function() {
                $(this).attr('checked','checked');
                selected.push($(this).val());                       
        } );
         // convert to a string
        var mystring = selected.length;
        alert(mystring);
})

- Farhad

如果您将 $("#selectallboxes").click 更改为 $("#selectall").click 会发生什么？ - darshanags

@darshangs 这只会为实际复选框创建一个点击事件，而不是全选按钮，问题在于点击事件的逻辑而不是处理程序。 - David Barker

@DavidBarker 对不起，是我的错误。我误读了问题。 - darshanags

我必须添加这个注释，上面的代码仅适用于第一页，并且警报仅返回此页面中元素的数量。 - Farhad

当您说“页面”时，您是指每个分页的dataTable页面吗？ - David Barker

4个回答

0

好的，这应该是您想要的内容。此代码将查找所有当前页面的<tr>，并使用dataTables _ API循环遍历它们。如果您想选择不同的行，则可以更改过滤器以适应您的需求，所有这些都在datatables文档中有详细说明。

$("#selectallboxes").click ( function () 
{
    var selected = new Array();

    // Use the _ function instead to filter the rows to the visible
    var data = oTable._('tr', {"filter":"applied"});

    $.each(data, function(key, index)
    {
        var input = $(this).find('input[type="checkbox"]');

        input.attr('checked', 'checked');

        selected.push(input.val());
    });

    // convert to a string
    var mystring = selected.length;

    alert(mystring);
});

- David Barker

很遗憾，它不起作用。结果与过去相同。 - Farhad

刚刚注意到，您将<input>放在<th>标签中，它们需要放在<td>中才能被“fnGetNodes()`”捕获。 - David Barker

我在函数的第一行添加了以下代码，以便获得更好的结果： alert(otable.fnGetNodes().length + '是总行数') 但是这只返回第一页元素的数量！ - Farhad

实际上，它返回<tbody>中节点的总数，而不仅仅是显示的节点。这就是该函数的作用，您可以运行一个检查$(this).is(':visible')来查看它是否被显示。 - David Barker

0

尝试类似这样的东西

$("#selectallboxes").click ( function () {
     var selected = [];
    $('input:checkbox', otable).each( function() {
        selected.push($(this).prop('checked', true).val());                       
    } );
    // convert to a string
    alert(selected.join());
})

- Arun P Johny

0

fnGetNodes()将只返回可见的行，有一个扩展可以获取由于分页而隐藏的行fnGetHiddenNodes()，但这只适用于jquery datatable版本1.9，虽然jquery datatable 1.10也有相应的更新，但并不起作用。您可以将从ajax请求中收到的数据存储在数组中，然后根据复选框点击事件的条件重新绘制带有数据和已选择属性的表格。

- Vivek Tiwari

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- darshanags · Accepted Answer

尝试:

$("#selectallboxes").click(function () {
    var selected = new Array();
    $(otable.fnGetNodes()).find(':checkbox').each(function () {
        $this = $(this);
        $this.attr('checked', 'checked');
        selected.push($this.val());
    });
    // convert to a string
    var mystring = selected.join();
    alert(mystring);
});

.length 返回数组的长度。我使用了 join() 将数组连接成字符串。DataTable 的 .fnGetNodes() 可以获取表格中的所有行，包括隐藏的行。