Question

当我更改复选框时，将调用以下代码段JQuery DataTable rowCallback的引用。该复选框位于表的标题中，一旦被选中，将根据父复选框的状态来选中或取消选中表中的所有复选框。

这在chrome中工作正常，即使我更改了复选框的状态，rowCallback也不会触发。更改IE 11中的复选框状态后，rowCallback将被激发并再次渲染所有复选框，这将删除所有其他复选框的当前状态。

以下是代码段：

$(document).ready(function() {

    $("#tableID").on('change', "#cbCheckAll", function(e) {

        //Once it is fired it will fire rowCallback also and if it was checked it will render all checkboxed again beacuse rowCallback was fired. This is happening only in IE 11 and working fine in Chrome.
        var table = $('#tableID').DataTable();
        var cells = table.rows({
            search: 'applied'
        }).nodes();
        var listChkBox = $(cells).find(".foo:enabled");
        var cbCheckAll = this.checked;
        $(listChkBox).each(function() {
            //This fires correctly on both Chrome and IE 11 but rowCallback is also fired.
            this.checked = cbCheckAll;
        });
    });
});

$("#tableID").DataTable({
    bAutoWidth: false,
    data: JsonData,
    destroy: true,
    paging: false,
    order: [],
    info: false,
    columns: [

        {
            data: null,
            title: "<input id='cbCheckAll' type='checkbox' />",
            defaultContent: "",
            className: "chkBox"
        }

    ],

    rowCallback: function(row, data, index) {

        //Fired even the cbCheckAll change is fired.
        var chkBx = "<input class=\"foo\" type=\"checkbox\">";
        $(row).find(".chkBox").html(chkBx);
    }

});

Answer 1

orderable: false和searchable：false修复了以下问题：

{
    data: null,
    title: "<input id='cbCheckAll' type='checkbox' />",
    defaultContent: "",
    className: "chkBox", 
    orderable: false, 
    searchable: false
}

IE 11中的复选框更改时调用JQuery DataTable rowCallback

1 个答案: