1.10.3 searchDelay not working properly

Christilut

Hi,

I was waiting for this release because I read it was going to include the searchDelay option which I needed (and I prefer not to workaround), so of course I immediately downloaded it when it was released.
However, I've added searchDelay: 3000 to my datatable init but it doesnt seem to work properly. It appears the timer is not reset on each keypress.

If I type very slowly (like 1 char per second), the draw is performed mid-typing.

You can test it here: http://live.datatables.net/sikexizi/2/edit
Just type any data from the table very slowly.

allan

This is correct and intentional. I thought I'd put a point about this in the documentation, but apparently not (I'll add it) - the searchDelay uses a throttle, not a debouce. So the search is triggered a maximum of once in the time specified and will be called at the end of that period, always. The counter is intentionally not reset on each call.

If that is something that you want you would need to either have your own input box or detach DataTables' default event listener and add your own with a key debounce.

Allan

Christilut

Thanks.

Can you give me a quick code snippet to show how to cancel the search event?

This does not work for me:

tables[0].on('search.dt', function (event) {
     event.stopPropagation();
});

and neither does this:

$('#table-residual-div > th').unbind('search.dt');

allan

Use $().off() to remove it:

$('div.dataTable_filter input').off('search.dt');

Allan

Christilut

off() doesn't seem to work for me.

I tried with my own css selector, confirmed it is correct in the debugger but the search still happens.

$('#product-table-residual_filter input').off('search.dt');

Any ideas?

allan

Sorry - it should be keyup.dt.

Allan

Christilut

Keyup.dt does not work either.

Search is still performed.

allan

One more try :-)

$('div.dataTables_filter input').off('keyup.DT search.DT input.DT paste.DT cut.DT');

Example: http://live.datatables.net/topeyeqi/1/edit

Allan

Christilut

The keyup.DT and input.DT combo did it :)

For anyone with the same problem, here's what I did:

$('div.dataTables_filter input').off('keyup.DT input.DT');

var searchDelay = null;

$('div.dataTables_filter input').on('keyup', function() {
    var search = $('div.dataTables_filter input').val();

    clearTimeout(searchDelay);

    searchDelay = setTimeout(function() {
        if (search != null) {
            tables[0].search(search).draw();
            tables[1].search(search).draw();
        }
    }, 2000);
});

Replace tables[0] with the instance of your DataTable.

Thanks for the help Allan :)

Edit: sorry, cant seem to get the code to display in a normal way :x

allan

Nice - thanks for sharing with us!

Allan