数据表全局搜索输入键的按键而不是任何键按键

Question

我正在使用jQuery的Datatables插件.我正在为ASP.Net项目使用服务器端处理功能.

每当我尝试在全局搜索中键入内容时,它会感到沮丧,我输入的每个字母都调用服务器端方法并为我带来结果.

当要过滤的数据很大时,它会变得更加令人沮丧.

是否有任何选项或方法可以在输入键的按键上调用搜索方法而不是按任何按键？

Answer 1

该怎么做只是取消绑定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);   
    }
   });     
} );

Answer 2

我也试过了Techie的代码.当然,我也收到了错误消息fnFilter is not a function.实际上,替换line oTable.fnFilter(this.value);through 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();
                }
            }); 
        }
    });    
});

Answer 3

以下是如何通过 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;
        }
    });

Answer 4

我最终在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();
            }
        }); 
    }
});

Answer 5

这是我设法做到的：

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

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

});