Question

当测试我的数据表有60,000行和6列（延迟渲染打开）时，我们在自定义搜索框中输入时遇到了延迟（而不是Datatables提供的默认搜索）。为了澄清，发生的事情是我会开始在自定义搜索框中键入“zuz”，在输入“u”之后，它应该花费一秒钟来实际出现并且不会立即出现。

基本上，我当前的代码都有它，以便在每个keyup事件之后进行搜索并重新绘制。

searchBoxOnKeyup: function(e) {
    var table = this.getCurrentTable();
    table.search($(e.target).val()).draw();
}

我认为发生的事情是该表在我的下一个字符输入之前绘制，以便下一个字符在搜索框中实际显示的时间更长。

我实际上使用了内置的搜索框，处理60,000行并显示输入没有任何延迟没有问题。我无法使用默认内置搜索框的原因是因为UI设计将搜索框放在不同的位置，旁边有其他控件（例如：选择和复选框）

到目前为止，我所尝试的是限制绘制操作：

var search_term = $(e.target).val();

var search = $.fn.dataTable.util.throttle(
    function ( search_term ) {
          console.log("running search on ", search_term);
          table.search( search_term ).draw();
     },
     2500
);

if (search_term.length > 3 || search_term.length === 0) {
    search(search_term);
}

但是，这并没有解决问题，因为在2.5秒后调用第一个draw（）后，我仍会遇到输入延迟的问题。

在输入整个输入之后没有表格绘制，是否有一个解决方法，以便用户输入不会因为表格必须重新绘制而滞后？

Answer 1

我找到的解决方法是基于xiaohouzi79给出的这篇SO帖子的答案之一：Run javascript function when user finishes typing instead of on key up?

基本上，我将搜索包装在一个函数中，然后我使用setTimeout仅在500毫秒后执行该函数，但仅在用户在搜索框中输入完输入后才执行。

以下是代码：

// Note: this.typing_timer is declared in initialization code elsewhere
searchBoxOnKeyup: function(e) {
     var table = this.getCurrentTable();
     var search_term = $(e.target).val();

     var searchFunc = function() {
          table.search(search_term).draw('page');
          // rest of the logic left out for brevity
     }

     clearTimeout(this.typing_timer)
     this.typing_timer = setTimeout(searchFunc, 500)
}

如果用户仍在键入，则搜索将无法启动，因为每次clearTimeout事件发生时我们都会keyup调用重置计时器。

Answer 2

没有解决方法：使用“... draw（'page'）;”没有'page'作为参数，正在执行完全重新搜索和重新排序表，导致输入滞后。关于“绘制”的完整文档 - ＆gt; https://datatables.net/reference/api/draw()

大数据集导致自定义搜索框滞后于jquery数据表

2 个答案: