我使用jQuery datatables复选框扩展来为我的表提供多选功能。单击任何行的复选框后,我将检索所有选定行的第一个单元格的数据发送到服务器。
该代码在Chrome浏览器中有效,但在IE浏览器中无效。
$(document).ready(function () {
var table = $('#tbl_inv').DataTable({
"paging": false,
//"ordering": false,
"info": false,
"searching": false,
'columnDefs': [
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
}
],
'select': {
'style': 'multi'
},
'order': [[1, 'asc']]
});
$('#tbl_inv input[type="checkbox"]').on('change', function () {
$.ajax({
url: '/Invoices/Pickup?handler=CalcTotaltoPay',
data: {
invIds: $('#tbl_inv').DataTable().column(0).checkboxes.selected().join(),
clientId:1234
}
})
.done(function (result) {
freshResult(result);
});
// Iterate over all selected checkboxes
//$.each(table.column(0).checkboxes.selected(), function (index, rowId) {
// console.log(index + '---' + rowId)
// console.log(table.cell(index, 5).data())
//});
});
});
当我使用IE浏览器时,
.column(0).checkboxes.selected()
返回一个列表,该列表不包括当前单击的复选框状态更改。意思是,当选中复选框时,.column(0).checkboxes.selected()返回一个不包含当前复选框数据的列表。取消选中复选框时,.column(0).checkboxes.selected()返回一个列表,其中仍包含此复选框的数据。 最佳答案
这是由于jQuery DataTables Checkboxes插件的竞争状况。它在内部处理change
事件以更新所选复选框的列表。当您自己处理change
事件时,显然在IE插件中仍不知道更改。
复选框状态更改时,尝试使用columns.checkboxes.selectCallback
选项处理事件。
'columnDefs': [
{
'targets': 0,
'checkboxes': {
'selectRow': true,
'selectCallback': function(nodes, selected){
// Handle checkbox state change event
}
}
}
],