Datatables setinterval function on Individual Column Search

l0ckm4

This code works to implement individual column searching

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 i try to implement a delay on searching (this uses server side processing) with ..

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 get the following error

TypeError: table.column is not a function
table.column( idx ).search(searchstring).draw();

Can anyone shed some light on this please?

l0ckm4

I found an answer here mattsnider.com

$.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 that = 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;
};

and my usage was as 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');
});

muthu32

you need to calculate automatic width calculation on fixed column during searching.
Then there is alternative way other than timeout method.

Editing source code helps me to achive that interactively resize function with nowrap. For each draw with fixed column & pagination, function _fnCloneLeft in source code is working. I also found that width & layout is calculated at init time & colvis hide/show using function

this._fnColCalc(); //calculating colwidth

this._fnGridLayout(this); //rearrange layout

So I add the above two function at the end of _fnCloneLeft function in source code.This may provide dynamic resize of fixed column with pagination and searching.