Datatables focusout working on search, but not keyup

Question

I'm having a weird issue with datatables that I'm stumped on. I have a table where one of the cells contains a link. I've added an initComplete function for the search field that detects either the enter key being pressed, or the focusout event being triggered.

The focusout event is working as expected, but after the keyup event is triggered, the table draws, but the link doesn't work. When I click the link the first time, it makes a call again to my ajax source, at which point the table draws again and then the link works.

The focusout event trigger works exactly as expected and the link works on the first click, and there's no extra call to the ajax source.

I'm wondering if the keyup event handler is interfering with the default configuration of datatables, which is also a keyup function. I'm using .unbind() which I thought would remove that event binding, but I'm wondering if that's not working for some reason.

here's the code:

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

I just found that after pressing enter on the search field, the sorting functionality also doesn't work the first time you click it, only after the second click will it sort. — hyphen

Hamza Abdaoui Hamza Abdaoui · Accepted Answer · 2017-08-14T14:36:53

Try to use This method, on accepts an object containing multiple events and handlers.

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

Datatables focusout working on search, but not keyup

1 Answers