Adding delay on server-side filtering

mathie

Right now, the code calls the filter on every key release, which is good for local data but not for server-side processing. Is it possible to add an option to delay (eg: 400ms) before actually sending the request? Thanks

jqFilter.keyup( function(e) {...});

mathie

I just modified the source for this delay and hope to see it in a future version
[code]
jqFilter.keyup( function(e) {
clearTimeout(iTimeout);
var sNewSearch = this.value;
iTimeout = setTimeout(function () {
_fnFilterComplete( oSettings, {
"sSearch": sNewSearch,
"bEscapeRegex": oSettings.oPreviousSearch.bEscapeRegex
});
},400); // could make this a setting, default is 400ms
});
[/code]

suvin_s

I am also facing the same problem,the code you provided puts a delay, which is very good, but i have a problem, i.e. if there are more entries before the delay, the previous request should be canceled. As i am interacting with the large data, each request will be put a load on my server. Please help to find a solution.

allan

Hi guys,

There is a plug-in API function for this already available: http://datatables.net/plug-ins/api#fnSetFilteringDelay . Great plug-in and quite solid.

Regards,
Allan

suvin_s

Hi Allan,

I am using multiple filter, will this API function help in this case.
below is the code
[code]

$.getJSON(Uri, null, function(json){

$.fn.dataTableExt.oApi.fnSetFilteringDelay = function(oSettings, iDelay){
/*
* Type: Plugin for DataTables (www.datatables.net) JQuery plugin.
* Name: dataTableExt.oApi.fnSetFilteringDelay
* Version: 2.1.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) - original
* Allan Jardine v2.0.0
* vex (on the forums) v2.1.0
* Created: 7/3/2009
* Language: Javascript
* License: GPL v2 or BSD 3 point style
* Contact: zygimantas.berziunas /AT\ hotmail.com
*/
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().anFeatures.f);

anControl.unbind('keyup').bind('keyup', function(){
var $$this = $this;

if (sPreviousSearch === null || sPreviousSearch != anControl.val()) {
window.clearTimeout(oTimerId);

oTimerId = window.setTimeout(function(){
$.fn.dataTableExt.iApiIndex = i;
_that.fnFilter(anControl.val());
}, iDelay);
}
});

return this;
});
return this;
}
oTable = $('#example').dataTable(json).fnSetFilteringDelay(1000);

$("tfoot input").keyup( function () {
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );

[/code]

I am not getting any delay, please help.

Regards
Suvin

allan

Hi Suvin,

If you have a look at the code in the plug-in, you will be able to see that it operates only on the 'global input filter' that DataTables adds at the top (by default) of the table. It removed the keyup handler and replaces it with it's own. Your keyup event handler for the input elements in tfoot however, will not have any delay since you are calling fnFilter directly. If you want a delay on them, you will need to use the code from the plug-in as a basis for delaying the server call, and write a function for that.

Regards,
Allan

Stephan

Hi,
sorry for reviving this thread. I had the same "problem" - no delay on custom column filter. I found a quick (and may be dirty) solution:

[code]
var search_timeout = undefined;
//col filter
$("tfoot input").keyup( function () {
if(search_timeout != undefined) {
clearTimeout(search_timeout);
}
$this = this;
search_timeout = setTimeout(function() {
search_timeout = undefined;
oTable.fnFilter( $this.value, $("tfoot input").index($this) );
}, 1000);
} );
[/code]

May be someone else needs a solution so i decided sharing this few lines (originally from Erik Beeson). I am new to jQuery, so any advices are appreciated.

pilou

anyone used oLanguage option, with the http://datatables.net/plug-ins/api#fnSetFilteringDelay plugin getting the delay?

Stephan

Hi pilou,

i use the plugin and oLanguage option. The plugin works fine for me for the "global" search. After reading about problems with oLanguage using the "sUrl" i decided to use it this way:
[code]
...
"oLanguage": {
"sProcessing": "Bitte warten...",
"sLengthMenu": "_MENU_ Eintr

Dave177

Stephan - I tried your quick and dirty solution. It worked great, thanks!

Edit - Actually I ran into some problems with this approach. I believe if you modify field 1 then switch to field 2 before the timeout period the changes you made in field 1 won't affect the filter.

Edit2 - My work around is below. Certainly not elegant but it seems to get the job done. focusout submits the query as soon as you change fields. I also modified the keyup to ignore "tab" as this was causing the focusout and keyup event to trigger.

[code]

$("tfoot input").keyup( function (event) {
if(event.keyCode!='9') {
if(search_timeout != undefined) {
clearTimeout(search_timeout);
}
$this = this;
search_timeout = setTimeout(function() {
search_timeout = undefined;
oTable.fnFilter( $this.value, $("tfoot input").index($this) );
}, 1000);
}
} );

$("tfoot input").focusout( function () {
if(search_timeout != undefined) {
clearTimeout(search_timeout);
}
$this = this;
oTable.fnFilter( $this.value, $("tfoot input").index($this) );
} );
[/code]

pilou

The whole error was because the asyncronus being of the ajax request, so I get the json array of the language, with a jquery getJSON function and in the success callback I initialize the datatable, with the oLanguage array.

[code]
$.getJSON("/scripts/datatablesLangs/"+lang+".js", function(languageData){
oTable = table.dataTable({
iDisplayLength: 20,
bProcessing: true,
bServerSide: true,
sAjaxSource: "/ajax/"+lang+"?json=true",
bAutoWidth: false,
sDom: "ifprtp",
sPaginationType: "full_numbers",
oLanguage: languageData,
aLengthMenu: false,
aaSorting: [[4, "desc"]]
}).fnSetFilteringDelay(600);
});
[/code]