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

Posted 2023-02-23

【中文标题】数据表全局搜索输入键的按键而不是任何按键按键

【英文标题】：datatables global search on keypress of enter key instead of any key keypress

【发布时间】：2013-01-15 04:24:08

【问题描述】：

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

当我每次尝试在全局搜索中输入内容时，它会变得令人沮丧，我输入的每个字母都会调用服务器端方法并为我带来结果。

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

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

【参考方案1】：

我也试过 Techie 的代码。当然，我也收到了错误信息fnFilter is not a function。 实际上，通过 oTable.search( this.value ).draw(); 替换行 oTable.fnFilter(this.value); 可以完成这项工作，但在我的情况下，取消绑定/绑定函数是在我的服务器端搜索表初始化之前执行的。因此，我将 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();
                
            ); 
        
    );    
);

【讨论】：

当initComplete 实际上作为oTable 初始化的最后一部分运行时，您如何将oTable 传递为oTable.search(...)？

不确定是否明白你的意思，@Tall'jeezzy？ DataTable 初始化完成后，我在搜索字段中添加输入键的键侦听器，并且我可以使用 oTable 对象，因为它的初始化已完成......

initComplete 有什么特别之处让它起作用？

我试图在我的描述中解释它。你到底有什么不清楚的地方？

它工作得很好......对于 DataTables.net 的早期版本。

【参考方案2】：

要做的就是取消绑定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);   
    
   );     
 );

【讨论】：

在第一个选项中，除非我弄错了，否则this.value 后面有一个错误的)。

你节省了我很多时间。我用了其他部分。刚换了身份证。 :-) 对我来说就像魔术一样工作。 :)

【参考方案3】：

我最终在 Datatables(v1.10.15) 中执行此操作。如果输入为空，我还会阻止退格和删除按钮发送搜索请求。

$.extend( $.fn.dataTable.defaults, 
    "initComplete": function(settings, json) 
        var api = this.api();
        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()) 
                api.search(this.value).draw();
            
        ); 
    
);

【讨论】：

table 对象从何而来？

@PrashantPokhriyal 已经很久了。我不记得了，但我认为它应该是一个 DataTable 实例。 var table = $('#datatable').DataTable( /* ... */ );

【参考方案4】：

这里是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;
        
    );

【讨论】：

对我有用，但我花了一段时间才意识到我使用“table”而不是“ogrid”

为我节省了很多时间。谢谢@LaurenceCope

【参考方案5】：

这是我设法做到的：

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

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

);

【讨论】：

oTable 以防万一在 InitComplete 函数中 is = this.api()。

这是最简单、最简洁的方法。国际海事组织。

【参考方案6】：

终于用这种方法搞定了

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

干杯

【讨论】：

initComplete 有什么特别之处让它起作用？

initComplete 函数解绑默认触发器并添加我自己的一个

【参考方案7】：

您可以使用 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']") 将获取所有搜索文本框。

【参考方案8】：

就是下面的代码 效果很好！

$(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 href=@Url.Action("Editar", "Usuario")?id='+full.id+'><b><i class=\"fa fa-edit bigfonts\"></i> Editar</b></a>';
                        
                    
                ]
            );

        );