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

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -