如何在 jQuery 数据表中的筛选行上设置复选框的选中值？

Question

我在 jQuery 数据表中设置选中状态的复选框时遇到问题。

我的设置

jQuery DataTable v. 1.9.4
过滤后的数据
启用分页并过滤数据跨越多个页面。

我正在尝试在（可以）跨越多个页面的过滤数据表中的复选框上设置选中状态。我只能让我的代码在第一页的复选框（可能是可见的行？）上设置选中状态，但后续页面上的任何复选框都保持未选中状态。

这是我的代码 - fiddle 这里：http://jsfiddle.net/ohj8t5kL/2/

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>
</head>

<body>
<div id="myform">
  <input type="checkbox" id="selectall" /><label for="selectall">Select all</label> 
  | Search <input type="text" value="" id="dtSearch">
  <table id="mytable"></table>
</div>

<script>
    var myList = function () {
        var dtTable;
        var init = function (){
            dtTable = $('#mytable').dataTable({
                "aaData": [
                    ["1", "name1", "1@example.org", "United States"],
                    ["2", "name2", "2@example.org", "Spain"],
                    ["3", "name3", "3@example.org", "Spain"],
                    ["4", "name4", "4@example.org", "United States"],
                    ["5", "name5", "5@example.org", "Spain"],
                    ["6", "name6", "6@example.org", "Spain"]
                ],
                "iDisplayLength": 3,
                "aoColumns": [
        { "sTitle": "", "bVisible": true, sWidth: "10%", "mRender": renderCheckBox },
        { "sTitle": "", "bVisible": true, sWidth: "25%" },
        { "sTitle": "", "bVisible": true, sWidth: "25%" },
        { "sTitle": "", "bVisible": true, sWidth: "40%" }
                ],
                "bInfo": false,
                "bLengthChange": false,
                "sDom": "trp"
            });
            $('#dtSearch').on('keyup', dtFilter)
            $('#myform').on('click', '#selectall', selectAll);
        };

        var dtFilter = function () {
            dtTable.fnFilter($('#dtSearch').val());
        };


        var renderCheckBox = function (data, type, full) {
            return '<input type="checkbox" value="' + full[0] + '" id="c' + full[0] + '"/>';
        };

        var selectAll = function () {
            var checked = $('#selectall').prop('checked');
            // get all filtered rows
            var filteredRows = $(dtTable).dataTable()._('tr', { "filter": "applied" });
            filteredRows.forEach(function (row) {
                $('#mytable input[value="' + row[0] + '"]').prop('checked', checked);
            });
        };
        return {
            Init : init
        };
    }();

    myList.Init();
</script>

</body>
</html>

在方法 selectAll 中调试 filteredRows 表明它正确包含过滤后的数据，例如对于关键字西班牙，filteredRows 包含 4 行：

var filteredRows = $(dtTable).dataTable()._('tr', { "filter": "applied" });

我怀疑我的问题出在以下代码段上。感谢您的帮助：

 filteredRows.forEach(function (row) {
     $('#mytable input[value="' + row[0] + '"]').prop('checked', checked);
 });

Answer 1

我找到了解决方案。

有人开发了fnGetFilteredNodes扩展方法：

    $.fn.dataTableExt.oApi.fnGetFilteredNodes = function (oSettings)
    {
       var anRows = [];
       for (var i=0,iLen=oSettings.aiDisplay.length;i<iLen;i++)
       {
          var nRow = oSettings.aoData[oSettings.aiDisplay[i]].nTr;
          anRows.push(nRow);
       }
    return anRows;
    };

我添加了这个和 fnGetHiddenNodes.js 并将我的 selectAll 方法更改为：

<script type="text/javascript" src="/js/dataTables.fnGetHiddenNodes.js"></script>
<script type="text/javascript" src="/js/dataTables.fnGetFilteredNodes.js"></script>


    var selectAll = function() {
        var checked = $('#selectall').prop('checked');
        $('input', dtTable.fnGetFilteredNodes()).attr('checked',checked); 
    };

如何在 jQuery 数据表中的筛选行上设置复选框的选中值？

How to set checked value of checkbox on filtered rows in a jQuery dataTable?

checkbox

datatable

jquery

filtering