Question

我遇到了一个奇怪的数据表问题，我很难过。我有一个表格，其中一个单元格包含一个链接。我为搜索字段添加了一个initComplete函数，用于检测被按下的回车键或被触发的聚焦事件。

焦点输出事件按预期工作，但在触发了键盘事件后，表格会绘制，但链接不起作用。当我第一次点击链接时，它再次调用我的ajax源，此时表再次绘制，然后链接工作。

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

我想知道keyup事件处理程序是否干扰了datatables的默认配置，这也是一个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;
            }
          });
        }
    });
}

Answer 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;
   } 
});

数据集专注于搜索，但没有关注

1 个答案: