javascript - DataTables / Checkboxes Plugin - 如何返回选中的复选框数量
问题描述
我有一个带有复选框的标准数据表,我无法弄清楚如何计算在更改时检查整个数据集的复选框数量。
插件: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 init 之外编写简单的 onChange 函数,但它只检测在表的可见页面上选中或未选中的复选框。
resultsTable.on('change', 'input[type="checkbox"]', function(e){
var numChecked = $("#results-table").find("input[type='checkbox']:checked").length;
console.log(numChecked);
});
我如何或在哪里可以编写一个函数,该函数将在复选框更改时触发,然后返回表中已选中的 TOTAL 复选框的数量?
解决方案
几乎在任何地方,我想。只要您在复选框选择器上注册事件(单击、更改等)
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 技能有点生疏,并且从风格的角度来看代码不符合标准,我深表歉意 :)
推荐阅读
- java - Jackson 后序列化功能
- java - 按钮 OnClick 监听器
- python - 在条件匹配的df中迭代数字
- excel - 如果上方或下方的单元格包含数据,则在 excel 中查找值并返回计数
- c - putchar 仅在按下回车键时结束 (C)
- mysql - 如何在 AWS 上创建一个网页 UI,可以在 AWS 中显示来自 MYSQL 的数据
- google-apps-script - Google 表格插件在刷新时启动
- r - 更改数据顺序数据框 R
- android - Android Jwplayer:发出非法状态异常
- c++ - 为什么 TinyXML2 的 XMLDocument::FirstChild() 函数在尝试解析这个有效的 XML 文件时返回 NULL?