Question

我有一个带有复选框的标准数据表，我无法弄清楚如何计算更改时整个数据集的复选框数量。

插件：https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

HTML：

<table id="myTable" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>01</td>
            <td>Alpha</td>
        </tr>
        <tr>
            <td></td>
            <td>02</td>
            <td>Bravo</td>
        </tr>
        <tr>
            <td></td>
            <td>03</td>
            <td>Charlie</td>
        </tr>
        <tr>
            <td></td>
            <td>04</td>
            <td>Delta</td>
        </tr>
        <tr>
            <td></td>
            <td>05</td>
            <td>Echo</td>
        </tr>
    </tbody>
</table>

JS：

resultsTable = $("#myTable").DataTable({
    "columnDefs": [
        {
            "targets" : 0,
            "checkboxes": true,
            "orderable": false
        }
    ],
    "select": {
        "style": "multi"
    },
    "order": [[3, 'asc']]
});

该表呈现良好，在tbody和thead中均具有复选框。我可以在DataTable初始化外部编写简单的onChange函数，但它仅检测表的可见页面上已选中或未选中的复选框。

resultsTable.on('change', 'input[type="checkbox"]', function(e){
    var numChecked = $("#results-table").find("input[type='checkbox']:checked").length;
    console.log(numChecked);
});

如何或在哪里编写将在更改复选框后触发的函数，然后在选中的表中返回TOTAL复选框的数量？

Answer 1

我认为几乎在任何地方。只要您在复选框选择器上注册事件（单击，更改等）

JS：

var selectedBoxes = []

$('body').on('click', "#results-table input[type='checkbox']", function(e) {
  if(e.target.checked){
    // add `e.target.value` to selectedBoxes
  }
  return selectedBoxes.length;
})

由于数据表页面更改不会刷新页面-切换数据表页面时，selectedBoxes数组应存储其状态。上面的东西能满足您的需求吗？抱歉，如果我的JS技能有点生锈，并且从样式的角度来看代码还没到手：）

DataTables / Checkboxes插件-如何返回已选中复选框的数量

1 个答案: