[英]Datatables server side column filter search delay
How can i make individual column search delay.如何使单个列搜索延迟。 So it automatically search for column input after few sec's and not on key press.所以它会在几秒钟后自动搜索列输入,而不是在按键时。 I have read over the internet.我已经通过互联网阅读。 Here is the duplicate question on stackoverflow jQuery DataTable column filters with delay search until 3+ characters or enter key but there no one posted a solution for it.这是关于 stackoverflow jQuery DataTable 列过滤器的重复问题,延迟搜索直到 3+ 个字符或输入键,但没有人发布解决方案。
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;
};
above code is for global search delay.上面的代码用于全局搜索延迟。 Can someone provide solution for delaying the search on individual column filter fields?有人可以提供延迟对单个列过滤器字段进行搜索的解决方案吗?
I couldn't find a simple solution for this and did not want to use plugins so I solved the problem with few lines of JavaScript.我找不到一个简单的解决方案,也不想使用插件,所以我用几行 JavaScript 解决了这个问题。 I basically first delay the AJAX Call and then before calling it I check if any key was pressed during the delay.我基本上首先延迟 AJAX 调用,然后在调用它之前检查延迟期间是否按下了任何键。 If yes, I do not execute the AJAX Call.如果是,我不执行 AJAX 调用。 If no, the AJAX Call gets executed.如果不是,则执行 AJAX 调用。 Here is my code snipped:这是我剪下的代码:
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);
}
} );
} );
yadcf plugin for datatables offers this out of the box + it has 10 different filter types用于数据表的 yadcf 插件提供了开箱即用的功能 + 它有10 种不同的过滤器类型
its called filter_delay
, you can see it in action yadcf - Server side source example它称为filter_delay
,您可以在yadcf - 服务器端源示例中看到它
If you are using DataTables 1.10.3+ you can use the throttle util function as listed in the docs:如果您使用的是 DataTables 1.10.3+,则可以使用文档中列出的油门 util 函数:
https://datatables.net/reference/api/%24.fn.dataTable.util.throttle() https://datatables.net/reference/api/%24.fn.dataTable.util.throttle()
For my need I had a table with columns 2-5 with header search inputs that needed throttling so I have been using:为了我的需要,我有一个包含第 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);
});
This will stop ajax from firing within 2 seconds of the last change.这将阻止 ajax 在上次更改后的 2 秒内触发。 There is also an example from Allan in the forum that gives a good example of it in use here:论坛中还有一个来自 Allan 的例子,它在这里给出了一个很好的例子:
https://www.datatables.net/forums/discussion/27496/fn-datatable-util-throttle-not-throttling-search-server-side https://www.datatables.net/forums/discussion/27496/fn-datatable-util-throttle-not-throttling-search-server-side
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.