25

jQueryのDatatablesプラグインを使用しています。ASP.Net プロジェクトでサーバー側の処理機能を使用しています。

グローバル検索で何かを入力しようとするたびに、入力する文字ごとにサーバー側のメソッドが呼び出され、結果が表示されるとイライラします。

フィルタリングするデータが大きい場合は、さらにイライラします。

キーを押したときではなく、Enterキーを押したときに検索メソッドを呼び出すオプションまたは方法はありますか?

4

8 に答える 8

25

やるべきことは、DataTables が入力ボックスに配置する keypress イベント ハンドラーのバインドを解除し、リターン キー (keyCode 13) が検出されたときにfnFilterを呼び出す独自のイベント ハンドラーを追加することです。

$("div.dataTables_filter input").keyup( function (e) {
    if (e.keyCode == 13) {
        oTable.fnFilter( this.value );
    }
} );

そうしないと

$(document).ready(function() {
   var oTable = $('#test').dataTable( {
                    "bPaginate": true,
                "bLengthChange": true,
                "bFilter": true,
                "bSort": true,
                "bInfo": true,
                    "bAutoWidth": true } );
   $('#test_filter input').unbind();
   $('#test_filter input').bind('keyup', function(e) {
       if(e.keyCode == 13) {
        oTable.fnFilter(this.value);   
    }
   });     
} );
于 2013-01-31T06:16:12.763 に答える
5

バージョン1.10でのAPI変更に伴う対応方法はこちら

    //prevents form submissions if press ENTER in textbox
    $(window).keydown(function (event) {
        if (event.keyCode == 13) {
            event.preventDefault();
            return false;
        }
    });

    var searchbox = $('#ordergrid_filter input');
    searchbox.unbind();
    searchbox.bind('keyup', function (e) {
        if (e.keyCode == 13) {
            ogrid.search(this.value).draw();
        }
    });

    var uitool = '';
    searchbox.on("mousedown", function () {
        uitool = 'mouse';
    });
    searchbox.on("keydown", function () {
        uitool = 'keyboard';
    });

    //Reset the search if the "x" is pressed in the filter box
    searchbox.bind('input', function () {
        if ((this.value == "") && (ogrid.search() != '') && (uitool == 'mouse')) {
            ogrid.search('').draw();
            return;
        }
    });
于 2014-05-15T20:42:49.840 に答える
1

最後に、この方法を使用して動作するようになりました

var oTable = $('#table-name').dataTable({
    processing: true,
    serverSide: true,
    ajax: "file.json",
    initComplete: function() {
        $('#table-name_filter input').unbind();
        $('#table-name_filter input').bind('keyup', function(e) {
            if(e.keyCode == 13) {
                oTable.fnFilter(this.value);
            }
        });
    },
    ....

乾杯

于 2016-04-28T10:51:05.867 に答える
0

jQueryで使えます。

// get the global text
var globalSearch = $("#txtGlobal").val();

// then put them in the search textboxes
$("input[type='search']").val(globalSearch);
// trigger keyup event on the datatables
$("input[type='search']").trigger("keyup.DT");

$("input[type='search']")すべての検索テキストボックスを取得します。

于 2016-10-06T17:48:57.297 に答える