jQuery DataTables:延迟搜索，直到键入3个字符或单击按钮
jQuery DataTables:延迟搜索，直到键入3个字符或单击按钮
提问于 2011-04-05 15:59:49
是否有选项仅在键入3个字符后才开始搜索？
我为同事写了一个PHP脚本，显示了20,000个条目，他们抱怨说，当输入一个单词时，前几个字母会导致一切冻结。
另一种方法是通过单击按钮而不是通过键入字符来启动搜索。
下面是我当前的代码：
$("#my_table").dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"aoColumns": [
/* qdatetime */ { "bSearchable": false },
/* id */ null,
/* name */ null,
/* category */ null,
/* appsversion */ null,
/* osversion */ null,
/* details */ { "bVisible": false },
/* devinfo */ { "bVisible": false, "bSortable": false }
],
"oLanguage": {
"sProcessing": "Wait please...",
"sZeroRecords": "No ids found.",
"sInfo": "Ids from _START_ to _END_ of _TOTAL_ total",
"sInfoEmpty": "Ids from 0 to 0 of 0 total",
"sInfoFiltered": "(filtered from _MAX_ total)",
"sInfoPostFix": "",
"sSearch": "Search:",
"sUrl": "",
"oPaginate": {
"sFirst": "<<",
"sLast": ">>",
"sNext": ">",
"sPrevious": "<"
},
"sLengthMenu": 'Display <select>' +
'<option value="10">10</option>' +
'<option value="20">20</option>' +
'<option value="50">50</option>' +
'<option value="100">100</option>' +
'<option value="-1">all</option>' +
'</select> ids'
}
} );回答 20
Stack Overflow用户
回答已采纳
发布于 2014-05-28 03:49:38
版本1.10的解决方案-
在这里寻找了一个完整的答案但没有找到之后，我写了这个(利用文档中的代码，以及这里的一些答案)。
以下代码用于延迟搜索，直到至少输入3个字符：
// Call datatables, and return the API to the variable for use in our code
// Binds datatables to all elements with a class of datatable
var dtable = $(".datatable").dataTable().api();
// Grab the datatables input box and alter how it is bound to events
$(".dataTables_filter input")
.unbind() // Unbind previous default bindings
.bind("input", function(e) { // Bind our desired behavior
// If the length is 3 or more characters, or the user pressed ENTER, search
if(this.value.length >= 3 || e.keyCode == 13) {
// Call the API search function
dtable.search(this.value).draw();
}
// Ensure we clear the search if they backspace far enough
if(this.value == "") {
dtable.search("").draw();
}
return;
});Stack Overflow用户
发布于 2012-04-25 23:26:28
为什么不试试Stony's答案的这个扩展版本:)
var searchWait = 0;
var searchWaitInterval;
$('.dataTables_filter input')
.unbind('keypress keyup')
.bind('keypress keyup', function(e){
var item = $(this);
searchWait = 0;
if(!searchWaitInterval) searchWaitInterval = setInterval(function(){
if(searchWait>=3){
clearInterval(searchWaitInterval);
searchWaitInterval = '';
searchTerm = $(item).val();
oTable.fnFilter(searchTerm);
searchWait = 0;
}
searchWait++;
},200);
});这将延迟搜索，直到用户停止键入。
希望能有所帮助。
Stack Overflow用户
发布于 2014-05-16 04:44:32
下面是如何在1.10版本中处理api更改的方法
var searchbox = $('#promogrid_filter input');
var pgrid = $('#promogrid').DataTable();
//Remove default datatable logic tied to these events
searchbox.unbind();
searchbox.bind('input', function (e) {
if(this.value.length >= 3) {
pgrid.search(this.value).draw();
}
if(this.value == '') {
pgrid.search('').draw();
}
return;
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5548893
复制相关文章
相似问题