Search for data table is very slow

Search for data table is very slow

JaiPalJaiPal Posts: 1Questions: 1Answers: 0

We are using data table for displaying data wit 7000 rows of data and 60 columns with multi select drop down option for individual columns, when we are searching in the data table it is taking so much time for filtering, if their are any other ways to speedup the search and data loading into the data table please inform. Thank you in advance.

Answers

  • allanallan Posts: 44,186Questions: 1Answers: 5,870 Site admin

    Happy to take a look at a test case showing the issue so we can performance trace it.

    Allan

  • kanamitskanamits Posts: 1Questions: 0Answers: 0

    The same problem with me, my table is a server-side processing. Every time I keypress the datatables activates ajax. I suggest closing the previous ajax every time you keypress in the search bar.

  • allanallan Posts: 44,186Questions: 1Answers: 5,870 Site admin

    If you have server-side processing enabled, then yes, every search key press will trigger an Ajax request - that's how server-side processing works (its gets the data to display for every draw from the server). There is the searchDelay option which can be useful when server-side processing if you want to introduce a delay to allow for key presses.

    ALlan

  • rduncecbrduncecb Posts: 117Questions: 2Answers: 26

    If the problem is caused by server side reloading on each keypress you could always debounce the search box so that the ajax call will only be triggered after a short delay after the user has stopped typing rather than every keypress. I've done this before using underscorejs with this function:

            function debounceSearch(tableId) {
                var $searchBox = $(tableId + "_filter input[type='search']");
                $searchBox.off();
    
                var searchDebouncedFn = _.debounce(function() {
                    $(tableId).DataTable().search($searchBox.val()).draw();
                }, 300);
    
                $searchBox.on("keyup", searchDebouncedFn);
            }
    
    

    Calling this with something like debounceSearch('#example') will cause the ajax call to be triggered only if there is is a pause between keyup events of 300ms. While the user is typing it will wait 300ms after they have stopped (unless they type slowly with > 300ms gap between keypresses) to update the table. I've found it can reduce the number of ajax calls a bit over the searchDelay option.

Sign In or Register to comment.