数据表延迟加载服务器端过滤器延迟

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 进行搜索。