是否只有在输入3个字符后才能选择开始搜索？
我已经为显示20,000个条目的同事编写了一个PHP脚本，他们抱怨说，在输入单词时，前几个字母会导致所有内容冻结。
另一种方法是通过点击按钮启动搜索，而不是通过字符输入。
以下是我目前的代码：
$("#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'
}
} );
答案 0 :(得分：74)
注意：这是针对更早版本的数据表，请参阅this answer了解jQuery datatables v1.10及更高版本。
这将修改输入框的行为，仅在按下任何一个返回或搜索中至少有3个字符时进行过滤：
$(function(){
var myTable=$('#myTable').dataTable();
$('.dataTables_filter input')
.unbind('keypress keyup')
.bind('keypress keyup', function(e){
if ($(this).val().length < 3 && e.keyCode != 13) return;
myTable.fnFilter($(this).val());
});
});
你可以在这里看到它：http://jsbin.com/umuvu4/2。我不知道为什么dataTables人员都同时绑定了keypress和keyup，但我仍然要求他们保持兼容，尽管我认为keyup就足够了。
希望这有帮助！
答案 1 :(得分：59)
版本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;
});
答案 2 :(得分：30)
为什么不试试Stony的答案的扩展版本:)）
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);
});
这将延迟搜索，直到用户停止输入。
希望它有所帮助。
答案 3 :(得分：10)
以下是如何使用版本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;
});
答案 4 :(得分：6)
这是一个类似插件的脚本，可以扩展数据表。
jQuery.fn.dataTableExt.oApi.fnSetFilteringEnterPress = function ( oSettings ) {
var _that = this;
this.each( function ( i ) {
$.fn.dataTableExt.iApiIndex = i;
var
$this = this,
oTimerId = null,
sPreviousSearch = null,
anControl = $( 'input', _that.fnSettings().aanFeatures.f );
anControl
.unbind( 'keyup' )
.bind( 'keyup', function(e) {
if ( anControl.val().length > 2 && e.keyCode == 13){
_that.fnFilter( anControl.val() );
}
});
return this;
} );
return this;
}
用法：
$('#table').dataTable().fnSetFilteringEnterPress();
答案 5 :(得分：6)
要做的是在用户在搜索框中输入最小字符后调用服务器调用，您可以关注Allan's suggestion：
自定义要添加的fnSetFilteringDelay() plug-in API function 在设置过滤器之前，字符串长度的额外条件也是 考虑空白字符串输入以清除过滤器
因此，对于至少3个字符，只需将the plug-in中的第19行更改为：
if ((anControl.val().length == 0 || anControl.val().length >= 3) && (sPreviousSearch === null || sPreviousSearch != anControl.val())) {
答案 6 :(得分：5)
这适用于DataTables 10.0.4：
var table = $('#example').DataTable();
$(".dataTables_filter input")
.unbind()
.bind('keyup change', function(e) {
if (e.keyCode == 13 || this.value == "") {
table
.search(this.value)
.draw();
}
});
答案 7 :(得分：4)
我的数据表版本1.10.10
我改变了一些东西，现在有效。所以，我分享，因为很难让它适用于版本1.10.10。感谢cale_b，Stony和Sam Barnes。看看代码，看看我做了什么。
var searchWait = 0;
var searchWaitInterval;
$('.dataTables_filter input')
.unbind() // leave empty here
.bind('input', function(e){ //leave input
var item = $(this);
searchWait = 0;
if(!searchWaitInterval) searchWaitInterval = setInterval(function(){
if(searchWait >= 3){
clearInterval(searchWaitInterval);
searchWaitInterval = '';
searchTerm = $(item).val();
oTable.search(searchTerm).draw(); // change to new api
searchWait = 0;
}
searchWait++;
},200);
});
答案 8 :(得分：3)
for 1.10 version将此代码添加到选项中的javascript中。 initComplete会覆盖搜索方法并等待写入3个字符。 感谢http://webteamalpha.com/triggering-datatables-to-search-only-on-enter-key-press/给了我光明。
ng-show="loadingView"答案 9 :(得分：3)
使用此
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
if ($("#myDataTable_filter input").val() !== "" && $("#myDataTable_filter input").val().length < 3)
return;
oSettings.jqXHR = $.ajax({
"dataType": 'json',
"timeout":12000,
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
答案 10 :(得分：3)
虽然它没有回答原始问题，但我对数据表进行了复杂而缓慢的搜索。过滤器事件在每次按键后触发，这意味着在10个字符后出现非常明显的延迟。因此，通过在过滤器事件被触发之前在按键之后引入短暂延迟，其中后续按键重置计数器并阻止先前的搜索，我能够使搜索看起来更快。其他人可能会觉得这很有帮助。
我用石头和基督教诺埃尔的答案来做到这一点：
var dataTableFilterTimeout;
var dataTableFilterWait = 200; // number of milliseconds to wait before firing filter
$.fn.dataTableExt.oApi.fnSetFilteringEnterPress = function ( oSettings ) {
var _that = this;
this.each( function ( i ) {
$.fn.dataTableExt.iApiIndex = i;
var $this = this;
var oTimerId = null;
var sPreviousSearch = null;
anControl = $( 'input', _that.fnSettings().aanFeatures.f );
anControl.unbind( 'keyup' ).bind( 'keyup', function(e) {
window.clearTimeout(dataTableFilterTimeout);
if ( anControl.val().length > 2 || e.keyCode == 13){
dataTableFilterTimeout = setTimeout(function(){
_that.fnFilter( anControl.val() );
},dataTableFilterWait);
}
});
return this;
} );
return this;
}
答案 11 :(得分：3)
您可以通过此
延迟对服务器的ajax调用var search_thread = null;
$(".dataTables_filter input")
.unbind()
.bind("input", function(e) {
clearTimeout(search_thread);
search_thread = setTimeout(function(){
var dtable = $("#list_table").dataTable().api();
var elem = $(".dataTables_filter input");
return dtable.search($(elem).val()).draw();
}, 300);
});
如果按键之间的时间小于300毫秒，此代码将停止ajax调用，这样当你写一个单词时，只有一个ajax调用将运行，并且只有当你停止输入时。 您可以使用延迟参数（300）“玩”以获得更多或更少的延迟
答案 12 :(得分：2)
使用3个字符后，您可以在Medtronic数据表上使用此代码或其他代码进行搜索：
onDataLoad: function (RequestGrid) {
// execute some code on ajax data load
var searchInput = $('div.dataTables_filter input').val();
if (searchInput.length() > 3 || searchInput.length() ==0) {
alert(searchInput);
dt.draw();
}
else {
return false;
}
},
searchInput.length（）== 0用于首场演出。
答案 13 :(得分：1)
您可以使用data.currentTarget.value.length获取传入的数据的长度，请参阅下文。
$('[id$="Search"]').keyup(function (data) {
if (data.currentTarget.value.length > 2 || data.currentTarget.value.length == 0) {
if (timoutOut) { clearTimeout(timoutOut); }
timoutOut = setTimeout(function () {
var value = $('[id$="Search"]').val();
$('#jstree').jstree(true).search(value);
}, 250);
}
});
显然你会希望在删除文本时运行此代码，因此将值设置为0
答案 14 :(得分：1)
使用API修正数据表1.10.12并修正＆＃39;输入＆＃39;。还在字符限制下添加了退格搜索清除。
// Create the Datatable
var pTable = $('#pTable').DataTable();
// Get the Datatable input box and alter events
$('.dataTables_filter input')
.unbind('keypress keyup input')
.bind('keypress keyup input', function (e) {
if ($(this).val().length > 2) {
pTable.search(this.value).draw();
} else if (($(this).val().length == 2) && (e.keyCode == 8)) {
pTable.search('').draw();
}
});
答案 15 :(得分：1)
如果您使用的是旧版本，则看起来像它。理查德的解决方案效果很好。 但是当我使用它时，我只是添加了新事件，而不是删除。因为在运行代码时，尚未创建表。 因此，我发现有一个fnInitComplete方法（在创建表时触发），并将其应用于Ricard的解决方案。 在这里
$("#my_table").dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
...
...,
"fnInitComplete": function (oSettings, json) {
var activeDataTable = $(this).DataTable();
$("#my_table_filter input")
.unbind('keypress keyup')
.bind('keypress keyup', function (e) {
if ($(this).val().length < 3 || e.keyCode !== 13) return;
activeDataTable.fnFilter($(this).val());
});
}
答案 16 :(得分：1)
您可能需要修改插件。
而不是使其成为X字符，请使用延迟，因此一旦他们停止输入1秒左右，搜索就会开始。
因此，当前触发搜索的keydown / keyup绑定将使用计时器进行修改...
var timer;
clearTimeout(timer);
timer = setTimeout(searchFunctionName, 1000 /* timeToWaitInMS */);
答案 17 :(得分：0)
这适用于DataTables 1.10.19版本。它只需要在您的网站模板中包含js，这对在不同页面上配置了多个dataTables的网站很有用。对于任何缓慢的xhr加载表也很有用，在所有当前运行完成之前，不允许任何新的xhr请求。所使用的搜索功能与插件最初设置search function的方式非常相似。
(function(window, document, $){
var xhring = 0;
$(document).on( 'preXhr.dt', function () {
xhring++;
} );
$(document).on( 'xhr.dt', function () {
xhring--;
} );
//at a minimum wait the full freq, and wait for any pending XHR requests to finish before calling fn
function choke( fn, freq ) {
var
frequency = freq !== undefined ? freq : 200,
last,
timerFn,
timer;
return function () {
var
that = this,
args = arguments;
timerFn = function () {
if (xhring || +new Date() < last + frequency) {
clearTimeout( timer );
timer = setTimeout( timerFn, frequency);
} else {
fn.apply( that, args );
}
}
last = +new Date();
clearTimeout( timer );
timer = setTimeout( timerFn, frequency );
};
}
//See https://github.com/DataTables/DataTables/blob/156faa83386460c578e00c460eca9766e38a0c5f/media/js/jquery.dataTables.js
//See https://github.com/DataTables/Plugins/blob/master/features/searchHighlight/dataTables.searchHighlight.js
$(document).on( 'preInit.dt', function (e, settings, json) {
var previousSearch = settings.oPreviousSearch;
var searchFn = function() {
/* Update all other filter input elements for the new display */
var val = !this.value ? "" : this.value; // mental IE8 fix :-(
/* Now do the filter */
if ( val != previousSearch.sSearch && (val.length >= 3 || val == "")) {
$.fn.dataTable.ext.internal._fnFilterComplete( settings, {
"sSearch": val,
"bRegex": previousSearch.bRegex,
"bSmart": previousSearch.bSmart ,
"bCaseInsensitive": previousSearch.bCaseInsensitive
} );
// Need to redraw, without resorting
settings._iDisplayStart = 0;
$.fn.dataTable.ext.internal._fnDraw( settings );
}
};
var searchDelay = settings.searchDelay !== null ?
settings.searchDelay :
$.fn.dataTable.ext.internal._fnDataSource( settings ) === 'ssp' ?
700 :
200;
var jqFilter = $( 'input', settings.aanFeatures.f )
.off('keyup.DT search.DT input.DT paste.DT cut.DT')
.on('keyup.DT search.DT input.DT paste.DT cut.DT', choke(searchFn, searchDelay))
;
} );
})(window, document, jQuery);
答案 18 :(得分：0)
您可以按名称minlength使用参数，以便将搜索限制为3个字符：
function(request, response) {
$.getJSON("/speakers/autocomplete", {
q: $('#keywordSearch').val()
}, response);
}, minLength: 3
答案 19 :(得分：0)
你能编写自己的函数来测试附加到onKeyUp事件处理程序的输入字符串的长度，并在达到最小长度后触发搜索功能吗？
有些事情：
input.onKeyUp(function() {
if(input.length > 3) {
mySearchfunction();
}
});
...也就是说，以伪代码的方式，但你得到了一个jist。
答案 20 :(得分：-1)
您需要修改jquery.datatables.js
-----更新 当然，你可以检查长度＆gt; 3，但我认为你还需要一个计时器。如果您有大量数据，则不希望在每次更新字符后继续对其进行过滤。
在此方法中：
jqFilter.keyup( function(e) {
if ( **this.value**.length > 3) {
var n = oSettings.aanFeatures.f;
for ( var i=0, iLen=n.length ; i<iLen ; i++ )
{
if ( n[i] != this.parentNode )
{
$('input', n[i]).val( this.value );
}
}
/* Now do the filter */
_fnFilterComplete( oSettings, {
"sSearch": this.value,
"bRegex": oSettings.oPreviousSearch.bRegex,
"bSmart": oSettings.oPreviousSearch.bSmart
} );
}
} );
为keyup添加一个计时器，如其中一个答案所示。
然后转到此网站http://jscompress.com/
过去修改后的代码和js将被缩小。
答案 21 :(得分：-1)
你有没有理由不查看“改变”的长度？
$('.input').change(function() {
if( $('.input').length > 3 ) {
//do the search
}
});