jquery - 检查 DataTable 中的所有复选框，包括隐藏行

Question

我正在尝试创建一个函数来检查 DataTable 中的所有复选框，包括隐藏的行。这是“复选框”列的 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);
})

score 10 · 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()为您提供表中的所有行，包括隐藏行。

score 0 · Accepted Answer

好的，这应该是您所追求的，这将找到所有当前 page<tr>并使用 dataTables _ API 循环浏览它们。您可以更改过滤器以满足您的需要，以根据需要选择不同的行，这都记录在数据表文档中。

$("#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);
});

score 0 · Accepted Answer

尝试类似的东西

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

score 0 · Accepted Answer

fnGetNodes() 将只给出可见的行，由于分页 fnGetHiddenNodes() 有一个扩展来获取隐藏的行，但这将适用于 jquery 数据表版本 1.9，在 jquery 数据表 1.10 中有相同的更新但是这个不管用。您可以将从 ajax 请求收到的数据存储在一个数组中，然后根据复选框单击事件的条件重新绘制带有数据的表格和带有选定属性的输入（复选框）。

jquery - 检查 DataTable 中的所有复选框，包括隐藏行

4 回答 4

Related

Reference