Filter Delay (fnSetFilteringDelay) - multiple filters

Filter Delay (fnSetFilteringDelay) - multiple filters

bjenkinsbjenkins Posts: 5Questions: 0Answers: 0
edited August 2009 in Plug-ins
Allan, Zygimantas, thanks for this plug-in! It's a great complement to a server-side dataTable, since I wanted to avoid an ajax request with each keystroke.

It seems to only apply to one "filter" input box. Here's an example of that:

[code]
oTable = $("table.custom").dataTable({
...
"sDom": 'rt<"sortable_bottom"plfi>',
...
});
oTable.fnSetFilteringDelay(1000);
[/code]

that renders a filter at the bottom of the table and it works great. When I add an additional filter at the top of the page like so:

[code]
oTable = $("table.custom").dataTable({
...
"sDom": '<"sortable_top"f>rt<"sortable_bottom"plfi>',
...
});
oTable.fnSetFilteringDelay(1000);
[/code]

...the delay only applies to the bottom filter. Any ideas?

thanks,
Brent

Replies

  • allanallan Posts: 55,045Questions: 1Answers: 8,638 Site admin
    Hi Brent,

    This is really a limitation of DataTables itself at the moment, rather than the plug-in (although of course that will need updating at some point). The thing is that DataTables doesn't currently support multiple placements of a control element (such as the filter) in sDom - hence why it doesn't work. This is very much on the roadmap for future releases - it's just a question of getting the time to implement them :-)

    Having said that multiple instances of a control of sDom is unsupported, it is actually possible to make it work for the filtering (skin-of-the-teeth type programming this :-) ). Because the input control basically just has an event handler assigned to it - I think you can get away with it by using the sDom you have above, and changing this line in the plug-in:

    [code]
    var anControl = $( 'input', _that.fnSettings().anFeatures.f );
    [/code]
    to

    [code]
    var anControl = $( 'div.dataTables_filter input', );
    [/code]
    I've not tested this. But I think with that change, we'll then have jQuery do all the hard work for us...

    Hope this helps!

    Regards,
    Allan
  • radovaradova Posts: 8Questions: 0Answers: 0
    To add delay to any number of inputs I used Christian C. Salvad
  • dagdag Posts: 1Questions: 0Answers: 0
    Hi,

    I have used the filter-delay plugin for several months, and only recently became aware that with multiple input-filters only one of them will work as expected.

    I replaced
    [code]
    anControl.val()
    [/code]
    with
    [code]
    $(this).val()
    [/code]
    This seems like a very simple fix, and I am kind of surprised that you JavaScript gurus didn't see it.
    Maybe this fix breaks the plugin in other scenarios (I only use this plugin when I have one dataTable on the page), but it works in my scenario.

    I did this with dataTables v1.8.0.beta.4, but I assume it also works with later versions.
    My plugin now looks like this:
    [code]
    jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function ( oSettings, iDelay ) {
    var _that = this;
    this.each( function ( i ) {
    $.fn.dataTableExt.iApiIndex = i;
    iDelay = (iDelay && (/^[0-9]+$/.test(iDelay))) ? iDelay : 250;

    var $this = this, oTimerId;
    var anControl = $( 'input', _that.fnSettings().aanFeatures.f );

    anControl.unbind( 'keyup' ).bind( 'keyup', function(event) {
    window.clearTimeout(oTimerId);

    if (event.keyCode == '13') {
    // cr, we filter immedately
    $.fn.dataTableExt.iApiIndex = i;
    _that.fnFilter( $(this).val() );
    } else {
    // not cr, set new timer
    oTimerId = window.setTimeout(function() {
    $.fn.dataTableExt.iApiIndex = i;
    _that.fnFilter( $(this).val() );
    }, iDelay);
    }

    });

    return this;
    } );
    return this;
    }
    [/code]
    Hope this helps others that face the same problem.

    Regards,
    Dag
This discussion has been closed.