数据表延迟加载服务器端筛选器延迟

Question

我正在使用数据表(https://datatables.net/(，并且启用了延迟加载。它只需要做什么，加载 10 个结果(或者其他什么，现在并不那么重要(。然后，当您单击新页面时，它必须获得 X 下一个结果(可能有很多结果，所以我不想一次加载所有数据(。

现在，有一个问题。如果我搜索，在每个字符之后，它都会发送一个 AJAX 请求，从而导致大量 AJAX 请求。但它应该做的是：

• 加载 10 个项目
• 你输入
• 在最后一个键入字符后，等待 2 秒钟，然后触发 AJAX 请求

我得到了这个代码：

var dataTable = $('#editor').dataTable({
    ajax: {
        url: baseUrl + '/ajax/getWebpages',
        dataSrc: '',
        type: 'POST'
    },
    deferLoading: 10,
    serverSide: true,
    searchDelay: 2000,
}).on('search.dt', function()
{
    clearTimeout(timer);
    timer = setTimeout(function() {
        return true;
    }, 2000);
});

我知道返回 true 可能是错误的，我真的不知道如何让我的想法发挥作用。我找了很久，什么也找不到。

Answer 1

找到答案：

我不得不把我的代码放在initComplete，比如：

var dataTable = $('#editor').dataTable({
    ajax: {
        url: baseUrl + '/ajax/getWebpages',
        dataSrc: '',
        type: 'POST'
    },
    deferLoading: 57,
    serverSide: true,
    searchDelay: 2000,
    columns: [ ],
    initComplete: function()
    {
        var api = dataTable.api();
        $('.dataTables_filter input').unbind('.DT').bind('keyup.DT', function(e)
        {
            var value = this.value;
            clearTimeout(timer);
            timer = setTimeout(function() {
                api.search(value).draw();
            }, 400);
        });
    }
});

解释：

• 您键入一些内容，此函数清除存储在timer中的超时(在我的情况下为"全局"变量(
• 如果您停止键入，则不会清除超时(因为只有在您键入时才会清除超时(
• 400 毫秒的最后一个超时仍处于活动状态，因此在键入最后一个字符后的 400 毫秒后，它将执行。

initComplete是在初始化数据表后调用的事件。 .unbind('.DT')删除 keyup 事件，因此它不会自动调用 AJAX 请求。 api.search进行搜索。