javascript - 选中jQuery DataTable所有页面的所有复选框(服务器端处理)
问题描述
我正在使用启用了服务器端处理的jQuery DataTables,并且在检查所有页面上的所有复选框时遇到了问题。以下是我的代码,请帮助我解决问题。这仅适用于当前页面。
$(document).on("ifClicked","#selecAllRec",function(event){
if(event.currentTarget.checked){
proCustomerListTbl.api().column(0).nodes().to$().each(function(index){
$(this).find('.proCustChk').iCheck("uncheck");
});
} else {
proCustomerListTbl.api().column(0).nodes().to$().each(function(index){
$(this).find('.proCustChk').iCheck("check");
});
}
});
解决方案
您可能有全局变量来存储是否所有条目都应被视为已检查:
var allChecked = false;
该值可以通过您的主要复选框切换(对于某些扩展选项,我使用纯 JSaddEventListener()
而不是 jQuery ):.on()
document.getElementById('example').addEventListener('click', event => {
if($(event.target).is('thead [type="checkbox"]')){
allChecked = $(event.target).prop('checked');
$('table').DataTable().draw(false);
event.stopPropagation();
}
}, true);
您可以根据allChecked
当前值呈现您的行复选框:
drawCallback: function(){
$(this.api().column(0).header()).html('<input type="checkbox"></input>');
[...$('#example [type="checkbox"]')].forEach(checkbox => $(checkbox).prop('checked', allChecked));
}
无论如何,这将不允许您根据当前排序/过滤来标记 当前数据行,但您可以使用allChecked
变量来恢复该选择服务器端。
以下片段演示了该方法:
//mimic source data
const srcData = [
{name: 'apple', cat: 'fruit'},
{name: 'pear', cat: 'fruit'},
{name: 'carrot', cat: 'vegie'},
{name: 'cabbage', cat: 'vegie'},
{name: 'potato', cat: 'vegie'}
];
//initialize global 'allChecked' variable
var allChecked = false;
//initialize datatables
$('table').DataTable({
dom: 'tp',
data: srcData,
pageLength: 3,
columns: [null, 'name', 'cat'].map(header => ({title: (header || ''), data: header})),
columnDefs: [{
targets: 0,
render: () => `<input type="checkbox"></input>`
}],
drawCallback: function(){
$(this.api().column(0).header()).html('<input type="checkbox"></input>');
[...$('#example [type="checkbox"]')].forEach(checkbox => $(checkbox).prop('checked', allChecked));
}
});
//header checkbox click handler
document.getElementById('example').addEventListener('click', event => {
if($(event.target).is('thead [type="checkbox"]')){
//assign global variable to current state
allChecked = $(event.target).prop('checked');
//trigger table re-draw
$('table').DataTable().draw(false);
//prevent click from propagation and swapping column ordering
event.stopPropagation();
}
}, true);
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="example"></table>
</body>
</html>
推荐阅读
- r - 总计的?列中的值,基于另一个表中的整个行列表,重复,其中列名与第二个表匹配
- java - 从内存中清除敏感数据的 char 数组
- python - 如何修复 http.client.UnknownProtocol: HTTP/2.0 错误
- c++ - std::locale 导致 Helgrind 出错
- javascript - javascript:如何使用 forEach 访问数组中的下一个索引?
- laravel - Laravel Forge sudo 用户要求输入密码
- php - 我们如何在奏鸣曲中定义块
- swift - 在 Swift 中设置枚举大小写的 rawValue?
- r - DPLYR 过滤器 - 为什么我会收到对象错误?filter_impl(.data, quo) 中的错误:评估错误:找不到对象“电子邮件”
- flask - 带有 Gunicorn 和 SCRIPT_NAME 的烧瓶