jQuery DataTables：3文字が入力されるまで検索を遅らせるORボタンがクリックされる
3文字が入力された後にのみ検索を開始するオプションはありますか？
同僚向けに20,000エントリを表示するPHPスクリプトを作成しましたが、Wordを入力すると最初の数文字ですべてがフリーズするという不満があります。
別の方法としては、文字入力ではなく、クリックされたボタンで検索を開始することです。
以下は私の現在のコードです：
$("#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'
}
} );
バージョン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;
});
注：これは以前のバージョンのデータテーブルについてのものでした。jQueryデータテーブルv1.10以降については this answer を参照してください。
これにより、入力ボックスの動作が変更され、リターンが押されたか、検索に少なくとも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は十分だと思いますが、互換性を保つために両方をオーバーライドしています。
お役に立てれば！
ストーニーの答えのこの拡張バージョンを試してみてください:)
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);
});
これにより、ユーザーが入力を停止するまで検索が遅延します。
それが役に立てば幸い。
バージョン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;
});
これがデータテーブルを拡張するプラグインのようなスクリプトです。
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();
ユーザーが検索ボックスに最小文字を入力した後にサーバー呼び出しを呼び出すには、 Allanの提案 を実行します。
fnSetFilteringDelay（）プラグインAPI関数 をカスタマイズして、フィルターを設定する前に文字列の長さに追加条件を追加します。フィルターをクリアするために空白文字列入力を検討する
したがって、最低3文字で、 プラグイン の行＃19を次のように変更するだけです。
if ((anControl.val().length == 0 || anControl.val().length >= 3) && (sPreviousSearch === null || sPreviousSearch != anControl.val())) {
これはDataTables 1.10.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();
}
});
データテーブル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);
});
1.10バージョンでは、このコードをオプションのjavascriptに追加します。 initCompleteは検索メソッドをオーバーライドし、3文字が書き込まれるまで待機します。 http://webteamalpha.com/triggering-datatables-to-search-only-on-enter-key-press/ に光を与えてくれてありがとう。
var dtable= $('#example').DataTable( {
"deferRender": true,
"processing": true,
"serverSide": true,
"ajax": "get_data.php",
"initComplete": function() {
var $searchInput = $('div.dataTables_filter input');
$searchInput.unbind();
$searchInput.bind('keyup', function(e) {
if(this.value.length > 3) {
dtable.search( this.value ).draw();
}
});
}
} );
} );
これにより、サーバーへの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呼び出しを停止します。この方法では、Wordを記述するとき、1回のajax呼び出しのみが実行され、入力を停止したときにのみ実行されます。多かれ少なかれ遅延を取得するために、遅延パラメーター（300）で「再生」できます
元の質問には答えていませんが、データテーブルで複雑で遅い検索をしました。各キーを押すたびにフィルターイベントが発生しました。これは、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;
}
これを使って
"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
});
}
古いバージョンを使用している場合は、そのように見えます。リチャードのソリューションは問題なく動作します。しかし、使用するときは、削除するのではなく、新しいイベントを追加しただけです。コードが実行されるとき、テーブルはまだ作成されていないためです。そのため、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());
});
}
APIを使用し、「入力」を正しくバインド解除するデータテーブル1.10.12のバージョンを修正しました。また、文字数制限の下のバックスペースでクリア検索を追加しました。
// 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();
}
});
おそらくプラグインを変更する必要があります。
また、X文字にする代わりに遅延を使用して、1秒ほど入力を停止すると検索が開始されるようにします。
したがって、現在検索をトリガーしているキーダウン/キーアップバインディングは、タイマーで変更されます...
var timer;
clearTimeout(timer);
timer = setTimeout(searchFunctionName, 1000 /* timeToWaitInMS */);
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に設定します
OnKeyUpイベントハンドラーにアタッチされた入力文字列の長さをテストし、最小長に達したら検索機能をトリガーする独自の関数を作成できますか？
以下のラインに沿ったもの：
input.onKeyUp（function（）{
if（input.length> 3）{
mySearchfunction（）;
}
}）;
...つまり、疑似コードのような方法で、しかしあなたはその意味を理解します。
検索を3文字までに制限するために、minlengthという名前でパラメーターを使用できます。
function(request, response) {
$.getJSON("/speakers/autocomplete", {
q: $('#keywordSearch').val()
}, response);
}, minLength: 3