我使用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
         }
      }
   }
],

08-18 23:49
查看更多