我正在使用启用了服务器端处理的 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;
该值可以通过您的主要复选框进行切换(我使用纯JS addEventListener() 而不是 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>关于javascript - 选中 jQuery DataTable 所有页面的所有复选框(服务器端处理)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56394690/