Filtration delay

zygimantas

How can we extend filtration to add delay after the "keyup" event on input element? Maybe it would be a nice parameter bFiltrationDelay?

allan

Hi zygimantas,

Interesting idea. I think that you are looking for could be done through the API 'fnFilter()' function:

[code]
$('input.delay').keyup() {
setTimeout( function () {
oTable.fnFilter( $('input.delay').val() );
}, 100 );
} );
[/code]

Allan

zygimantas

I have succeeded to write this working code, but it's still not reusable. I guess delay parameter in table settings would be the best solution. Here is the hack:

[code]
var oTable = $(...).dataTable({ ...,
'fnInitComplete': function() {
var timeout = undefined;
// Anyone knows how to access table as JQuery object inside fnInitComplete?
// $('div.dataTables_filter input:text') works but it's not perfect solution in case
// you use multiple tables.
$('div.dataTables_filter input:text').unbind('keyup').bind('keyup', function() {

if (timeout != undefined) {
clearTimeout(timeout);
}

var $this = this;
timeout = setTimeout(function() {
timeout = undefined;
oTable.fnFilter($($this).val());
}, 250);
}
});
[/code]

allan

Hi zygimantas,

Thanks for posting your code - I'm sure it will be useful for others!

I'll probably not include a delay parameter in the table settings for the moment (unless a lot of other people want to use it) as I would imagine that what you are wanting to do is quite unique. Most people will likely want the filtering to be immediate like it is. For those who want a delay - you've now provided the required code - thanks!

Allan

zygimantas

You are welcome ;) I will find the way to implement this code globally in my situation. I hope this snippet will be useful for everyone who would like to improve filtering performance and browser responsiveness.

zygimantas

Here is a small plugin I've written for my project. Feel free to use and modify if you find it useful.

[code]
jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function ( oSettings, iDelay ) {

/*
* Type: Plugin for DataTables (www.datatables.net) JQuery plugin.
* Name: dataTableExt.oApi.fnSetFilteringDelay
* Version: 1.0.0
* Description: Enables filtration delay for keeping the browser more
* responsive while searching for a longer keyword.
* Inputs: object:oSettings - dataTables settings object
* integer:iDelay - delay in miliseconds
* Returns: JQuery
* Usage: $('#example').dataTable().fnSetFilteringDelay(250);
*
* Author: Zygimantas Berziunas (www.zygimantas.com)
* Created: 7/3/2009
* Language: Javascript
* License: GPL v2 or BSD 3 point style
* Contact: zygimantas.berziunas@hotmail.com
*/

iDelay = (iDelay && (/^[0-9]+$/.test(iDelay))) ? iDelay : 250;

var $this = this, oTimerId;

// Unfortunately there is no nFilter inside oSettings.
var anControl = $( 'div.dataTables_filter input:text' );

anControl.unbind( 'keyup' ).bind( 'keyup', function() {

var $$this = $this;
window.clearTimeout(oTimerId);

oTimerId = window.setTimeout(function() {

$$this.fnFilter( anControl.val() );
}, iDelay);
});

return this;
}
[/code]

allan

Hi zygimantas,

That's fantastic - thanks for providing this as a plug-in. Absolutely ideal! I've put it up on the plug-ins page: http://datatables.net/plug-ins#api_fnSetFilteringDelay

Allan

jaycs

This is looks great, thanks for sharing zygimantas, just what I need to get searches performing. Unfortunately the plugin above doesn't work when you've got more than one DataTable on page at once.

I'm having a fiddle now, but if you know what would fix it, please share.

allan

I think it should work - how are you initialising your tables? It has the code in the plug-in to cope with multiple tables, but there might be something wrong with that...

Btw - probably worth starting a new discussion in future rather than pulling up a 3 year old one :-)

Allan

jaycs

Okay, this seems to fix it; it needed focusing on the passed-in table, not all tables.

[code]jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function (oSettings, iDelay) {

/*
* Type: Plugin for DataTables (www.datatables.net) JQuery plugin.
* Name: dataTableExt.oApi.fnSetFilteringDelay
* Version: 1.0.1
* Description: Enables filtration delay for keeping the browser more
* responsive while searching for a longer keyword.
* Inputs: object:oSettings - dataTables settings object
* integer:iDelay - delay in miliseconds
* Returns: JQuery
* Usage: $('#example').dataTable().fnSetFilteringDelay(250);
*
* Author: Zygimantas Berziunas (www.zygimantas.com)
* Created: 7/3/2009
* Language: Javascript
* License: GPL v2 or BSD 3 point style
* Contact: zygimantas.berziunas@hotmail.com
*/

iDelay = (iDelay && (/^[0-9]+$/.test(iDelay))) ? iDelay : 250;

var $this = this, oTimerId;

// Unfortunately there is no nFilter inside oSettings.
var anControl = $('#' + oSettings.sInstance + ' div.dataTables_filter input:text');
anControl.unbind('keyup').bind('keyup', function () {

var $$this = $this;
window.clearTimeout(oTimerId);

oTimerId = window.setTimeout(function () {

$$this.fnFilter(anControl.val());
}, iDelay);
});

return this;
}[/code]

allan

Cool thanks. I'll take a look and see what it wrong with the plug-in code.

Allan

jaycs

Line 26 above fixed it for me.

matbeard

This plugin looks useful and I think I'll use it until I come up with a way of achieving what I'm really after...

How about adding a parameter that sets the minimum number of characters that need to be typed into the search field before filtering starts?

When using server-side data this would reduce the number of ajax calls and potentially make the reults more meaningful.

This would be similar to the jquery UI autocomplete widget, which has a minLength parameter.

allan

@jaycs: Super - thanks

@matbeard: Sounds like a good idea. It should be as simple as checking for anControl.val().length >= 3 (or whatever number you want) just before the fnFilter call is fired off.

Allan