Question

我正在使用datatables jquery插件（https://datatables.net/）除了当我尝试在搜索单个列时实现延迟时，一切正常。

此代码有效，但没有延迟

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();
        } );
    } );

但是当我尝试使用..

实现搜索延迟（这使用服务器端处理）时

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);
        });
    });

我收到以下错误

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

有人可以对此有所了解吗？

Answer 1

在此处找到解决方案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 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;
};

我的用法如下： -

    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');
    });

Answer 2

这就是我如何做你正在寻找的东西。我知道这是一个老帖子，但这对其他人有帮助。

var myTable = $('#myTable').DataTable({
     serverSide: true,
     processing: true,
     searching: true,
     responsive: true,
     "ajax": {
         "url": urlBase,
         "cache": true
     },
     "columns": [
         {"data": "id"},
         {"data": "product.name"},
         more cols...
     ]
});
myTable.columns().every(function () {
    var column = this;
    var typingTimer; //timer identifier
    $('input', this.footer()).on('keyup change', function () {
        var value = this.value;
        clearTimeout(typingTimer);
        typingTimer = setTimeout(function(){
            if (column.search() !== value) {
                column
                    .search(value)
                    .draw();
            }
        }, 1000); //1 second
    });

    $('input', this.footer()).on('keydown', function () {
        clearTimeout(typingTimer);
    });
});

单个列搜索上的数据表setinterval函数

2 个答案: