Javascript Datatables服务器端列筛选器搜索延迟
如何使单个列搜索延迟。所以它会在几秒钟后自动搜索列输入,而不是按键。我在网上读过。这是关于stackoverflow的重复问题,但没有人发布解决方案Javascript Datatables服务器端列筛选器搜索延迟,javascript,jquery,ajax,datatables,Javascript,Jquery,Ajax,Datatables,如何使单个列搜索延迟。所以它会在几秒钟后自动搜索列输入,而不是按键。我在网上读过。这是关于stackoverflow的重复问题,但没有人发布解决方案 jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function ( oSettings, iDelay ) { var _that = this; if ( iDelay === undefined ) { iDelay = 500;
jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function ( oSettings, iDelay ) {
var _that = this;
if ( iDelay === undefined ) {
iDelay = 500;
}
this.each( function ( i ) {
$.fn.dataTableExt.iApiIndex = i;
var
$this = this,
oTimerId = null,
sPreviousSearch = null,
anControl = $( 'input', _that.fnSettings().aanFeatures.f );
anControl.unbind( 'keyup search input' ).bind( 'keyup', function() {
var $$this = $this;
if (sPreviousSearch === null || sPreviousSearch != anControl.val()) {
window.clearTimeout(oTimerId);
sPreviousSearch = anControl.val();
oTimerId = window.setTimeout(function() {
$.fn.dataTableExt.iApiIndex = i;
_that.fnFilter( anControl.val() );
}, iDelay);
}
});
return this;
} );
return this;
};
以上代码用于全局搜索延迟。有人能提供延迟搜索单个列筛选器字段的解决方案吗?yadcf数据表插件提供了这种开箱即用的解决方案+它有10种不同的筛选器类型 它被称为
filter\u delay
,您可以看到它正在运行
p、 我是的作者,我找不到一个简单的解决方案,不想使用插件,所以我用几行JavaScript解决了这个问题。我基本上是先延迟AJAX调用,然后在调用之前检查是否在延迟期间按下了任何键。如果是,我不执行AJAX调用。如果否,则执行AJAX调用。这是我截取的代码:
var start = new Date();
table.columns().every( function () {
var first = this;
$( 'input', this.header() ).on( 'keyup change', function () {
start=new Date();
var second = this;
if ( first.search() !== this.value ) {
setTimeout(function(){if ((new Date() - start)>250) {first.search( second.value ).draw();}}, 250);
}
} );
} );
如果您使用的是DataTables 1.10.3+,则可以使用文档中列出的throttle util函数: 出于我的需要,我有一个列为2-5的表,其中包含需要节流的标题搜索输入,因此我一直在使用:
const searchColumns = [1,2,3,4];
dataTable.columns(searchColumns).every(function (i) {
let throttledSearch = $.fn.dataTable.util.throttle(
function () {
dataTable
.column(i)
.search(this.value)
.draw();
},
2000
);
$('input', dataTable.column(i).header()).on('keyup change clear', throttledSearch);
});
这将阻止ajax在上次更改后的2秒内启动。论坛上还有一个Allan的例子,在这里给出了一个很好的例子: