Большой набор данных, вызывающий окно пользовательского поиска для lag jquery datatables

Question

При тестировании таблицы данных с 60 000 строк и 6 столбцов (отложенный рендер включен) мы столкнулись с задержкой при вводе пользовательского поля поиска (а не поиска по умолчанию, который Datatables обеспечивает). Чтобы уточнить, что происходит, я начинаю вводить «zuz» в поле пользовательского поиска, после ввода «u», он должен занять секунду, чтобы фактически появиться и не появится мгновенно.

В основном, мой текущий код имеет его так, что он выполняет поиск и повторное рисование после каждого события keyup.

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

Я думаю, что это происходит, что таблица рисует перед моим вводом следующего символа, так что следующий символ занимает больше времени, чтобы фактически отображаться в окне поиска.

Я действительно использовал встроенную поисковую строку, и у нее нет проблем с 60 000 строк и показом ввода без какого-либо отставания. Причина, по которой я не могу использовать построенное по умолчанию окно поиска, заключается в том, что в дизайне пользовательского интерфейса есть окно поиска в другом месте с другими элементами управления рядом с ним (например: select и флажок)

Что я пробовал так далеко дросселирование действия раздаточного:

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 секунды.

Недостаточно того, чтобы нарисовать таблицу после ввода всего ввода, существует ли обходное решение, так что пользовательский ввод не отстает из-за того, что таблица должна повторно рисовать?

Answer 1

Обходной, что я обнаружил, базируется на одном из ответов на этот SO пост, заданных xiaohouzi79: 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');" Без параметра «страница» в качестве параметра выполняется полный повторный поиск и переупорядочение таблицы, что приводит к задержке ввода. Полный документ на «ничьей» ->https://datatables.net/reference/api/draw()