Filter Delay (fnSetFilteringDelay) - multiple filters

bjenkins

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

allan

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

radova

To add delay to any number of inputs I used Christian C. Salvad

dag

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