我初始化了一个像这样的id示例的数据表 –
var table = $("#example").DataTable({
"aaSorting": [[4,"asc"]],select: true,dom: 'Bfrtip',buttons: [
'excelHtml5',{
extend: 'pdfHtml5',orientation: 'portrait',pageSize: 'LEGAL'
},{
extend: 'print',pageSize: 'LEGAL',title: 'Visible rows'
},{
extend: 'selectAll',className: 'selectall'
}
],language: {
buttons: {
selectAll: "Select all rows"
}
}
});
当我点击selectAll按钮时,我尝试使用以下代码搜索所有行后 –
table.on('search.dt',function (e) {
e.preventDefault();
$(".selectall").click(function (e) {
e.preventDefault();
var rows_after_search = table.rows({search: 'applied'}).nodes();
rows_after_search.each(function () {
$(this).toggleClass('selected');
});
});
});
在此之后我有点失落. selectAll仍在选择该页面上的所有行.
详细说来,假设Data-table的当前页面有10行.搜索后显示2行.现在我想选择2行,同时单击selectAll按钮.
解决方法
我相信您的一般问题是您没有重置取消选择(未过滤)的行.您只是为已筛选的行切换选择.最终会在所有选定的行中结束.此外,我会将代码放在action方法中,因为您实际上覆盖了selectAll的默认功能.
{
extend: 'selectAll',className: 'selectall',action : function(e) {
e.preventDefault();
table.rows({ page: 'all'}).nodes().each(function() {
$(this).removeClass('selected')
})
table.rows({ search: 'applied'}).nodes().each(function() {
$(this).addClass('selected');
})
}
}
