Datatables server side column filter search delay

Question

How can i make individual column search delay. So it automatically search for column input after few sec's and not on key press. I have read over the internet. Here is the duplicate question on stackoverflow jQuery DataTable column filters with delay search until 3+ characters or enter key but there no one posted a solution for it.

jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function ( oSettings, iDelay ) {
        var _that = this;

        if ( iDelay === undefined ) {
            iDelay = 500;
        }

        this.each( function ( i ) {
            $.fn.dataTableExt.iApiIndex = i;
            var
                $this = this,
                oTimerId = null,
                sPreviousSearch = null,
                anControl = $( 'input', _that.fnSettings().aanFeatures.f );

                anControl.unbind( 'keyup search input' ).bind( 'keyup', function() {
                var $$this = $this;

                if (sPreviousSearch === null || sPreviousSearch != anControl.val()) {
                    window.clearTimeout(oTimerId);
                    sPreviousSearch = anControl.val();
                    oTimerId = window.setTimeout(function() {
                        $.fn.dataTableExt.iApiIndex = i;
                        _that.fnFilter( anControl.val() );
                    }, iDelay);
                }
            });

            return this;
        } );
        return this;
    };

above code is for global search delay. Can someone provide solution for delaying the search on individual column filter fields?

score 1 · Answer 1 · answered Apr 27 '16 at 12:30

I couldn't find a simple solution for this and did not want to use plugins so I solved the problem with few lines of JavaScript. I basically first delay the AJAX Call and then before calling it I check if any key was pressed during the delay. If yes, I do not execute the AJAX Call. If no, the AJAX Call gets executed. Here is my code snipped:

var start = new Date();

table.columns().every( function () {
    var first = this;
    $( 'input', this.header() ).on( 'keyup change', function () {
        start=new Date(); 
        var second = this;
        if ( first.search() !== this.value ) {
            setTimeout(function(){if ((new Date() - start)>250) {first.search( second.value ).draw();}}, 250);
        }
    } );
} );

Daniel · Answer 2 · 2014-11-11T09:10:05.363

0

yadcf plugin for datatables offers this out of the box + it has 10 different filter types

its called filter_delay , you can see it in action yadcf - Server side source example

p.s I'm the author of yadcf

edited Nov 11 '14 at 09:10

answered Oct 13 '14 at 07:51

Daniel

36,833
10
119
200

score 0 · Answer 3 · answered Sep 30 '20 at 21:35

If you are using DataTables 1.10.3+ you can use the throttle util function as listed in the docs:

https://datatables.net/reference/api/%24.fn.dataTable.util.throttle()

For my need I had a table with columns 2-5 with header search inputs that needed throttling so I have been using:

const searchColumns = [1,2,3,4];

dataTable.columns(searchColumns).every(function (i) {
    let throttledSearch = $.fn.dataTable.util.throttle(
        function () {
            dataTable
                .column(i)
                .search(this.value)
                .draw();
        },
        2000
    );

    $('input', dataTable.column(i).header()).on('keyup change clear', throttledSearch);
});

This will stop ajax from firing within 2 seconds of the last change. There is also an example from Allan in the forum that gives a good example of it in use here:

https://www.datatables.net/forums/discussion/27496/fn-datatable-util-throttle-not-throttling-search-server-side

score 0 · Answer 4 · answered May 17 '23 at 08:54

The best solution i came up with to filter the columns not the main search is

 // Filter event handler
var delayTimer;
var delayTime = 500;
$(table.table().container()).on('keyup', 'thead input:not(:checkbox)', function () {
    clearTimeout(delayTimer);
    var that = this;
    delayTimer = setTimeout(function () {
        table
            .column($(that).data('index'))
            .search(that.value)
            .draw();
    }, delayTime);
    
});

I used clearTimeout(delayTimer); to clear the previous search so the user can continue typing without any interruption

Datatables server side column filter search delay

4 Answers4