javascript - Datatables setinterval function on Individual Column Search -
i using datatables jquery plugin (https://datatables.net/) works fine apart when try implement delay searching indivdual columns.
this code works has no delay
table.columns().indexes().each( function (idx) { $( 'input', table.column( idx ).footer() ).on( 'keyup change', function () { console.log(idx); console.log(this.value); table.column( idx ).search(this.value).draw(); fixedcolumns.fnredrawlayout(); } ); } );
but when try implement delay on searching (this uses server side processing) ..
table.columns().indexes().each( function (idx) { $( 'input', table.column( idx ).footer() ).on( 'keyup change', function () { searchwait = 0; var searchstring = this.value; if(!searchwaitinterval) searchwaitinterval = setinterval(function(e){ if(searchwait>=3){ clearinterval(searchwaitinterval); searchwaitinterval = ''; var table = $('#example').datatable(); console.log(idx); console.log(searchstring); table.column( idx ).search(searchstring).draw(); fixedcolumns.fnredrawlayout(); searchwait = 0; } searchwait++; },200); }); });
i following error
typeerror: table.column not function table.column( idx ).search(searchstring).draw();
can shed light on please?
found solution here http://mattsnider.com/jquery-function-for-change-event-and-delayed-keydown-event/
$.fn.changeordelayedkey = function(fn, ikeydelay, skeyevent) { var itimeoutid, oeventdata; if (!$.isfunction(fn)) { oeventdata = arguments[0]; fn = arguments[1]; ikeydelay = arguments[2]; skeyevent = arguments[3]; } if (!ikeydelay || 0 > ikeydelay) { ikeydelay = 500; } if (!skeyevent || !this[skeyevent]) { skeyevent = 'keydown'; } function fnexeccallback() { cleartimeout(itimeoutid); fn.apply(this, arguments); } function fndelaycallback() { var = this, args = arguments; cleartimeout(itimeoutid); itimeoutid = settimeout(function() { fnexeccallback.apply(that, args); }, ikeydelay); } if (oeventdata) { this.change(oeventdata, fnexeccallback); this[skeyevent](oeventdata, fndelaycallback); } else { this.change(fnexeccallback); this[skeyevent](fndelaycallback); } return this; };
my usage follows:-
table.columns().indexes().each( function (idx) { $('input', table.column( idx ).footer() ).changeordelayedkey( table ,function(e) { table.column( idx ).search(this.value).draw(); fixedcolumns.fnredrawlayout(); }, 500, 'keyup'); });
Comments
Post a Comment