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

Posted 2023-05-09

【中文标题】数据表延迟加载服务器端过滤器延迟

【英文标题】：Datatables deferred loading serverside filter delay

【发布时间】：2017-10-07 20:22:22

【问题描述】：

我正在使用数据表 (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 可能是错误的，我真的不知道如何让我的想法发挥作用。找了半天也没找到。

【问题讨论】：

是的。但这不符合我的要求；相反，它只是在发出请求之前等待 X 毫秒，这意味着如果您输入 5 个字符，它会等待并仍然执行所有这些请求。但我已经找到了答案。

你看的叫“去抖”看看吧

【参考方案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 进行搜索。

【讨论】：

感谢您的回答和解释。我一直在寻找这个功能，不明白为什么正常的行为是不断的轮询......

@PatrickWinkelmayer 和未来的读者：数据表的创建者/维护者意识到它更有意义，但还没有改变它，但会更新这个线程 datatables.net/forums/discussion/33028/…。那里也有一些不错的选择。

自发布此解决方案以来，是否有更好的解决方案？