单个列搜索上的数据表设置间隔函数
Datatables setinterval function on Individual Column Search
我正在使用数据表 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();
任何人都可以解释一下吗?
在这里找到了解决方案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');
});
这就是我如何完成您正在搜索的内容。我知道这是旧的 post 但这可能对其他人有帮助。
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);
});
});
我正在使用数据表 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();
任何人都可以解释一下吗?
在这里找到了解决方案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');
});
这就是我如何完成您正在搜索的内容。我知道这是旧的 post 但这可能对其他人有帮助。
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);
});
});