1.10.3 searchDelay not working properly

1.10.3 searchDelay not working properly

ChristilutChristilut Posts: 9Questions: 3Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • ChristilutChristilut Posts: 9Questions: 3Answers: 0
    edited October 2014

    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');
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

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

    Allan

  • ChristilutChristilut Posts: 9Questions: 3Answers: 0

    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?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Sorry - it should be keyup.dt.

    Allan

  • ChristilutChristilut Posts: 9Questions: 3Answers: 0

    Keyup.dt does not work either.

    Search is still performed.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • ChristilutChristilut Posts: 9Questions: 3Answers: 0
    edited October 2014

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Nice - thanks for sharing with us!

    Allan

This discussion has been closed.