Kon*_*ras 5 checkbox jquery datatables
这是我为 K12 学校创建的一个开源项目。请参阅以下内容：
http://users.sch.gr/chertour/projectsms/sms_list_ajax_demo.html
你会找到：
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>元素中。按预期打印多个复选框。
当我按下“全选”复选框时，复选框都被选中但没有打印任何内容。
当我切换（“全选”复选框未选择）时，会打印每个值。
它应该是相反的。我尝试了许多变体，但都无济于事。有什么我错过了吗？任何想法或建议都非常感谢。
问题出在您的点击事件处理程序中，它在 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(","));
};
有关代码和演示，请参阅此示例。