数据表专注于搜索，但不是 keyup

Posted 2023-05-09

【中文标题】数据表专注于搜索，但不是 keyup

【英文标题】：Datatables focusout working on search, but not keyup

【发布时间】：2018-01-22 10:17:46

【问题描述】：

我对数据表有一个奇怪的问题，我很困惑。我有一个表格，其中一个单元格包含一个链接。我为搜索字段添加了一个 initComplete 函数，该函数检测是否按下了 enter 键或触发了 focusout 事件。

focusout事件按预期工作，但keyup事件触发后，表格绘制，但链接不起作用。当我第一次单击链接时，它会再次调用我的 ajax 源，此时表格再次绘制，然后链接工作。

focusout 事件触发器完全按预期工作，并且链接在第一次点击时工作，并且没有对 ajax 源的额外调用。

我想知道 keyup 事件处理程序是否干扰了数据表的默认配置，这也是一个 keyup 函数。我正在使用 .unbind() ，我认为它会删除该事件绑定，但我想知道这是否由于某种原因不起作用。

代码如下：

var Patients = function () 

var patient_list = function() 
    var table = $('#patient_list').on('preXhr.dt', function ( e, settings, data ) 
            App.blockUI();
        ).DataTable(
        "language": 
            "aria": 
                "sortAscending": ": activate to sort column ascending",
                "sortDescending": ": activate to sort column descending"
            ,
            "emptyTable": "No data available in table",
            "info": "Showing _START_ to _END_ of _TOTAL_ entries",
            "infoEmpty": "No entries found",
            "infoFiltered": "",
            "lengthMenu": "_MENU_ entries",
            "search": "Search:",
            "zeroRecords": "There are no results..."
        ,
        "fnDrawCallback": function( oSettings ) 
          this.show();
          App.unblockUI();
        ,
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) ,
        "fnServerParams": function (aoData) ,
        buttons: [],
        "columns": [
        
            //name
            "type": "html",
            "searchable": true,
            "orderable": true
        ,
        
            //Home Phone
            "type": "html-num",
            "searchable": true,
            "orderable": true
        ,
        
            //Cell Phone
            "type": "html-num",
            "searchable": true,
            "orderable": true
        ,
        
            //Email
            "type": "html",
            "searchable": true,
            "orderable": false
        ,
        
            //DOB
            "type": "date",
            "searchable": false,
            "orderable": false
        ,
        
            //Address
            "type": "html",
            "searchable": true,
            "orderable": false
        ,
        
            //Latest Activity
            "type": "html",
            "searchable": true,
            "orderable": false
        
    ],
        "order": [[0, 'asc']],
        "lengthMenu": [
            [10, 15, 20, 50, -1],
            [10, 15, 20, 50, "All"] // change per page values here
        ],
        // set the initial value
        "pageLength": 50,
        "bJQueryUI": true,
        "bServerSide": true,
        "bProcessing": false,
        "searching": true,
        "sAjaxSource": base_url + 'Patients/load_patient_list',
        "sServerMethod": "POST",
        "bStateSave": false,
        "initComplete": function() 
          var $searchInput = $('#patient_list_filter input');
          $searchInput.unbind();
          $searchInput.on('keyup focusout', function(e) 
            if(e.type == 'keyup' && e.keyCode == 13) 
              table.search(this.value).draw();
              return;
             else if(e.type == 'focusout')
              table.search(this.value).draw();
              return;
             else 
              return;
            
          );
        
    );

【问题讨论】：

我刚发现在搜索栏按回车后，第一次点击排序功能也不起作用，只有第二次点击才会排序。

【参考方案1】：

尝试使用This method，on 接受包含多个事件和处理程序的对象。

$searchInput.on(
   keyup : function(e) 
        if(e.keyCode == 13) 
          table.search(this.value).draw();
          return;
        
   ,
   focusout : function(e) 
         table.search(this.value).draw();
         return;
    
);

【讨论】：

我试过这个，它的工作方式相同。它仍然会再次进行 ajax 调用，而 focusout 不会进行额外的调用并按预期工作。