数据表反转操作中的全选复选框
Posted
技术标签:
【中文标题】数据表反转操作中的全选复选框【英文标题】：Select All checkbox in Datatables inverted operation 【发布时间】：2018-03-16 00:31:35 【问题描述】：这是我为 K12 学校创建的一个开源项目。 请参阅以下内容：
http://users.sch.gr/chertour/projectsms/sms_list_ajax_demo.html
你会发现：
-
获取服务器端数据并嵌入到数据表中
jQuery DataTables Checkboxes 用于在 jQuery DataTables 中使用复选框的插件。
JS代码：
$(document).ready(function()
var table = $('#students').DataTable(
"processing": true,
"serverSide": true,
"ajax": 'students_list_db_sms_send.php',
responsive:
details:
type: 'column',
target: 'tr'
,
'columnDefs': [
targets: 0,
"checkboxes":
"selectRow": true
,
targets: 1,
className: 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
],
'select':
'style': 'multi'
,
'order': [
[2, 'asc']
]
);
$('#students tbody').on('click', 'input[type="checkbox"]', function()
var tr = $(this).closest('tr');
var rowData = table.row(tr).data();
var rows_selected = table.column(0).checkboxes.selected();
$('#sms_names').text('');
$.each(rows_selected, function(index, rowId)
$('#sms_names').append(' ' + rowId);
);
);
/************************************THIS IS FROM THE FOLLOWING FIDDLE*****************************************/
/* https://jsfiddle.net/snqw56dw/466/ */
$('#students').on('init.dt', function()
$('#students thead th input[type="checkbox"]').on('click', function(e)
var rows_selected = table.column(0).checkboxes.selected();
$('#sms_names').text('');
$.each(rows_selected, function(index, rowId)
$('#sms_names').append(' ' + rowId);
);
);
);
);
对应的HTML是：
<body>
<hr>
<table id='students' class='display' width='100%' cellspacing='0'>
<thead>
<tr>
<th></th>
<th></th>
<th>name</th>
<th>surname</th>
<th>fathers name</th>
<th>date</th>
<th>tel</th>
<th>class</th>
</tr>
</thead>
</table>
<span id="sms_names"></span>
</body>
我已启用第一行作为复选框行。
当我单击复选框时，rowID 会打印在 <span> 元素中。
多个复选框按预期打印。
当我按下“全选”复选框时，所有复选框都被选中，但没有打印任何内容。
当我切换（“全选”复选框未选择）时，会打印每个值。
应该是相反的。我尝试了许多变化，但无济于事。有什么我错过的吗？非常感谢任何想法或建议。
【问题讨论】：
【参考方案1】：问题出在您的点击事件处理程序中，它在 Checkbox 插件有机会更新选定复选框列表之前触发。
使用columns.checkboxes.selectCallback 处理复选框的选择/取消选择事件。
例如：
$(document).ready(function()
var table = $('#example').DataTable(
'ajax': 'https://api.myjson.com/bins/1us28',
'columnDefs': [
'targets': 0,
'checkboxes':
'selectRow': true,
'selectCallback': function()
printSelectedRows();
],
'select':
'style': 'multi'
,
'order': [[1, 'asc']]
);
);
// Print selected rows
function printSelectedRows()
var rows_selected = $('#example').DataTable().column(0).checkboxes.selected();
// Output form data to a console
$('#example-console-rows').text(rows_selected.join(","));
;
有关代码和演示，请参阅this example。
【讨论】：
非常感谢您的回复和帖子编辑。非常感谢。 @KonstantinosChertouras，很高兴 Checkbox 插件对您有用。您提出了一个很好的观点，我会将这个用例添加到文档中。 @Gyrocode.com 如果我想使用 jquery 取消全选怎么办？那不调用 selectCallback 并且列表不更新。 @Gyrocode.com 简而言之。$('input[type="checkbox"]', table.cells().nodes()).prop('checked',false); 不会影响 selectCallback 。以上是关于数据表反转操作中的全选复选框的主要内容，如果未能解决你的问题，请参考以下文章