DataTables / Checkboxes Plugin - 如何返回选中的复选框数量

Posted 2023-05-09

【中文标题】DataTables / Checkboxes Plugin - 如何返回选中的复选框数量

【英文标题】：DataTables / Checkboxes Plugin - How to return the amount of checkboxes checked

【发布时间】：2020-01-21 17:21:16

【问题描述】：

我有一个带有复选框的标准 DataTable，但我不知道如何计算在更改时检查整个数据集的复选框数量。

库：https://datatables.net/

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

HTML：

<table id="myTable" >
    <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 init 之外编写简单的 onChange 函数，但它只检测在表的可见页面上选中或未选中的复选框。

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

我如何或在哪里可以编写一个函数，当复选框被更改时触发，然后返回表中被选中的复选框的总数？

【参考方案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 API 中必须有一些回调，允许检查是否选中了任何/所有复选框。我只是在确定它时遇到了问题。

DataTables/Checkboxes API 中的回调是否允许检查是否已找到任何/所有复选框？