web-dev-qa-db-ja.com

任意のキーを押すのではなく、Enterキーを押すことによるデータテーブルのグローバル検索

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

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

フィルターされるデータが大きい場合、それはさらに苛立たしくなります。

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

jquerysearchdatatables
21
Prasad Jadhav

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

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

Else

$(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);   
    }
   });     
} );
21
Techie

私もTechieのコードを試しました。もちろん、_fnFilter is not a function_というエラーメッセージも表示されました。実際、oTable.fnFilter(this.value);からoTable.search( this.value ).draw();までの行を置き換えるとうまくいきますが、私の場合、サーバー側の検索テーブルが初期化される前にunbind/bind関数が実行されました。したがって、unbind/bind関数をinitCompleteコールバック関数に入れると、すべてが正常に機能します。

_$(document).ready(function() {
    var oTable = $('#test').dataTable( {
        "...": "...",
        "initComplete": function(settings, json) {
            $('#test_filter input').unbind();
            $('#test_filter input').bind('keyup', function(e) {
                if(e.keyCode == 13) {
                    oTable.search( this.value ).draw();
                }
            }); 
        }
    });    
});
_
22
Jan

Datatables（v1.10.15）でこれを行うことになります。また、入力が空の場合、バックスペースと削除ボタンが検索リクエストを送信しないようにします。

$.extend( $.fn.dataTable.defaults, {
    "initComplete": function(settings, json) {
        var textBox = $('#datatable_filter label input');
        textBox.unbind();
        textBox.bind('keyup input', function(e) {
            if(e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox.val()) {
                // do nothing ¯\_(ツ)_/¯
            } else if(e.keyCode == 13 || !textBox.val()) {
                table.search(this.value).draw();
            }
        }); 
    }
});
5
Abdalla Arbab

バージョン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;
        }
    });
4
Chad Kuehn

ここに私がそれをどうやって管理したかがあります：

$(document).on('focus', '.dataTables_filter input', function() {

    $(this).unbind().bind('keyup', function(e) {
        if(e.keyCode === 13) {
            oTable.search( this.value ).draw();
        }
    });

});
3
K. Igor

最後に、この方法を使用して機能させました

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);
            }
        });
    },
    ....

乾杯

0
Jaume Bosch

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']")は、すべての検索テキストボックスを取得します。

0
spikee

それはそれがコードベローですそれはとてもうまくいきます！

$(function() {

            var  table = $('#DataTable1').DataTable({
                 proccessing: true,
                 searching: true,
                 paging: true,
                 serverSide: true,
                 initComplete: function() {
                     $('.dataTables_filter input').unbind();
                     $('.dataTables_filter input').bind('keyup', function(e){
                         var code = e.keyCode || e.which;
                         if (code == 13) { 
                             table.search(this.value).draw();
                         }
                     });
                 },
                 ajax: {
                    url: '@Url.Action("Paginacao")',
                    type: 'POST' 
                },
                language: {
                    url: '/plugins/datatables/lang/Portuguese-Brasil.json'
                },
                columns:
                [
                        { "data": "id", visible: false },
                        { "data": "nome", "autoWidth": true },
                        { "data": "cnpj", "autoWidth": true },
                    {
                        "render": function(data, type, full, meta) {
                            return '<a [email protected]("Editar", "Usuario")?id='+full.id+'><b><i class=\"fa fa-edit bigfonts\"></i> Editar</b></a>';
                        }
                    }
                ]
            });

        });
0
Marinpietri