2

When testing my data table with 60,000 rows and 6 columns (defer render is turned on), we encountered a lag when typing in a custom search box (not the default search that Datatables provides). To clarify, what is happening is that I would start to type in "zuz" into the custom search box, after typing in the "u", it should take a second to actually appear and does not appear instantaneous.

Basically, my current code has it so that it does a search and re-draw after each keyup event.

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

I think what's happening is that the table draws before my next character input so that the next character takes longer to actually show up in the search box.

I've actually used the built in search box and it has no problem dealing with the 60,000 rows and showing the input without any lag. The reason that I can't use the default built in search box is because the UI design has the search box in a different location with other controls next to it (ex: select and a checkbox)

What I have tried so far is throttling the draw action:

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);
}

However, this didn't solve the problem because I would still run into the issue of the input lag after the first draw() gets called after 2.5 seconds.

Short of having the table draw after the entire input has been typed, is there a workaround so that the user input does not lag due to the table having to re-draw?

SpartaSixZero
  • 2,183
  • 5
  • 27
  • 46
  • You can move the location of the DataTables search box by modifying the [dom](https://datatables.net/reference/option/dom) you pass to the DataTables initializer. If that box works and you just don't like the default location, this might help. – Chris H. Sep 07 '16 at 15:09
  • I did see that. However, I didn't find any examples where it positioned the default search box in between other elements not part of the default DataTables control elements. – SpartaSixZero Sep 07 '16 at 15:16

2 Answers2

2

The workaround that I found is based off of one of the answers on this SO post given by xiaohouzi79: Run javascript function when user finishes typing instead of on key up?

Basically, I wrapped my search in a function and then I use setTimeout to only execute that function after 500 miliseconds but only after the user has finished typing their input in the search box.

Here is the code:

// 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)
}

Search will not kick in if the user is still typing because of our clearTimeout call resetting the timer every time keyup event occurs.

Community
  • 1
  • 1
SpartaSixZero
  • 2,183
  • 5
  • 27
  • 46
  • Hi there...thanx for offering your mod. Could you elaborate a little on how to implement this with the standard search (table.search( this.value ).draw('page') jQuery method? Would really appreciate it...thanks again. – tfrancois Jun 09 '19 at 06:04
2

Without workaround: use "... draw('page');" Without 'page' as parameter full re-search and re-order of the table is being performed resulting in input lag. Full doc on "draw" -> https://datatables.net/reference/api/draw()

wanderer
  • 21
  • 1