“单独列搜索”上的Datatables setinterval函数

Datatables setinterval function on Individual Column Search

本文关键字：Datatables setinterval 函数上的单独列搜索单独列搜索更新时间：2023-09-26

我正在使用datatablesjquery插件(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();

有人能解释一下吗？

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

这就是我可以做您正在搜索的事情的方法。我知道这是一个老帖子，但这可能会对其他人有所帮助。

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