[解決済み] jQueryのDataTables。3文字入力されるか、ボタンがクリックされるまで検索を遅らせる。
2023-04-07 08:06:04
質問
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'
}
} );
どのように解決するのですか?
バージョン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;
});
関連
-
[解決済み] ユーザーがEnterキーを押してフォームを送信できないようにする
-
[解決済み] WebKit の event.layerX と event.layerY に関する問題
-
[解決済み] Bootstrapのモーダルを閉じる
-
[解決済み] jQueryを使ってロールオーバー時に画像ソースを変更する
-
[解決済み] val()を使ってselectの値を設定しても、jqueryのchangeイベントが発生しないのはなぜですか?
-
[解決済み] jQueryの.ajax()メソッドが私のセッションクッキーを送信しないのはなぜですか?
-
[解決済み] jQuery OR Selector?
-
[解決済み】jQuery DataTablesプラグインによって追加された検索バーとフッターを削除するにはどうすればよいですか?
-
[解決済み】jQuery:フォーム送信時にどのボタンがクリックされたかを取得する方法は?
-
[解決済み] jQuery / JavaScriptでJSONデータをパースする方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScript - 二重引用符のエスケープ
-
[解決済み] jQuery 複数のイベントで同じ関数を起動する
-
[解決済み] jQueryのSELECT要素で特定のオプションを選択するにはどうすればよいですか?
-
[解決済み] チェックボックスのチェック/アンチェックは、jqueryを使用していますか?重複
-
[解決済み] jQueryで5秒待つには?
-
[解決済み] jQueryを使ってロールオーバー時に画像ソースを変更する
-
[解決済み] jQuery .onとhoverの使い分けは可能ですか?
-
[解決済み] jQueryを使用して要素の型を検索する
-
[解決済み】iPad版SafariでjQueryを使ってタッチイベントを認識させる方法は?可能でしょうか?
-
[解決済み] jQueryで<input type="text">のonchangeを実装するには?