Question

我正在使用jQuery DataTable插件。一个页面上有两个数据表（在引导选项卡中），都通过ajax加载。当一个表完成加载时，我希望用户能够排序/更改页面/搜索它，即使另一个表仍然从服务器获取数据。但是，当其中一个表正在进行ajax调用时，两个表都被阻止注册任何排序/分页/搜索事件。

为了检查在ajax调用期间是否正在注册点击，我设置了一个常规点击处理程序，显示实际点击了列标题。但是，如果没有数据表ajax调用正在运行，则单击仅生成数据表顺序事件。

$(function () {
    // code here
    // columns setup...

    createDatatable(videoColumns, $("#VideoTab"), "Videos");
    createDatatable(booksColumns, $("#BooksTab"), "Books");
});

function createDatatable(columns, $tableContainer, tableType) {        
    var $dataTable = $tableContainer.find(".custom-data-table");    

    var mTable = $dataTable.DataTable({
        serverSide: true,
        ajax: {
            url: "/Tables/GetTableData",
            data: function (d) {
                return $.extend({}, d, {
                    tableType: tableType
                });
            },
            type: "POST"
        },
        columns: columns
    });

    //isn't called when either table is still loading data
    $dataTable.on('order.dt', function () {
        console.log("table ordered " + tableType);
    });

    //this registers a click on the column header even when ajax is running
    $tableContainer.on("click", function(e){
        console.log(e.target);
    });
}

有一个数据表内部设置可能是相关的，但我无法弄清楚要改变什么来阻止它阻止在当前没有进行ajax调用的表上注册事件。

    /**
     * Note if draw should be blocked while getting data
     *  @type boolean
     *  @default true
     */
    "bAjaxDataGet": true,

多个数据表：ajax请求一个表阻塞其他表上的事件

0 个答案: