数据集区间函数在单列搜索中的应用
数据集区间函数在单列搜索中的应用
提问于 2015-04-01 09:39:52
我使用的是可数据的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();有人能说明一下这件事吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-04-01 11:28:30
在这里找到了一个解决方案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');
});Stack Overflow用户
发布于 2016-07-26 22:12:59
这就是我能做你要找的东西的方法。我知道这是个老职位，但这可能对其他人有帮助。
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);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29387415
复制相关文章
相似问题
腾讯云开发者
