How to get DataTables search to work properly with AJAX result?

Question

I am working with DataTables and I'm trying to get a search function to work properly. It's not filtering any results from the table. I've reviewed the documentation, but something's off apparently.

This pulling data through an AJAX call.

I've included the HTML with the search input and the accompanying jQuery, but I'm not sure what I'm missing.

I'm not getting any error messages. It's simply not filtering any of the table data.

HTML

<div class="row d-flex align-items-end flex-column">
  <div class="col-sm-12 col-lg-4">
    <input type="text" class="form-control" id="myInput" placeholder="Search">
  </div>
</div>

<table id="tblData" class="table table-striped tabled-bordered" style="width: 100%">
  <thead>
    <tr>
      <th>Term</th>
      <th>Course Title</th>
      <th>Class No</th>
      <th>Session</th>
    </tr>
  </thead>
</table>

jQuery

//DataTables
$(document).ready(function() {
  $.fn.loadDataGrid = function() {

    $('#tblData').DataTable({

      orderCellsTop: true,
      fixedHeader: true,
      pageLength: 10,
      responsive: true,
      dom: 'tip',
      columnDefs: [
      {
        targets: [0],
        sortable: true,
        data: 'semester',
        width: '10%'
      },{
        targets: [1],
        sortable: false,
        data: 'title',
        width: '10%',
      },{
        targets: [2],
        sortable: false,
        data: 'class_nbr',
        width: '10%',
        className: 'dt-head-center dt-body-center'
      },{
        targets: [3],
        sortable: false,
        data: 'session',
        width: '10%',
        className: 'dt-head-center dt-body-center'
      }],
      order: [0, 'desc'],
      ajax: {
        url: 'data/ajax/file.cfm',
        dataSrc: '',
        error: function(xhr, error, code) {
          $().showMsgInfo('Sorry, there was a problem trying to retrieve the data. Please try again later.');
        }
      },
    });    
});

//search function
$(document).ready(function() {
  var table = $('#tblData').DataTable();
   
  // #myInput is a <input type="text"> element
  $('#myInput').on( 'keyup', function () {
      table.search( this.value ).draw();
  });
});

Answer 1

You aren't defining table and yet you're referencing it in your filter.

Also, I believe you can simplify your code, using one document ready, and removing the function that's wrapping your DataTable declaration.

$(document).ready(function() {

  //assign your DataTable to a variable here
   var table = $('#tblData').DataTable({

      orderCellsTop: true,
      fixedHeader: true,
      pageLength: 10,
      responsive: true,
      dom: 'tip',
      columnDefs: [
      {
        targets: [0],
        sortable: true,
        data: 'semester',
        width: '10%'
      },{
        targets: [1],
        sortable: false,
        data: 'title',
        width: '10%',
      },{
        targets: [2],
        sortable: false,
        data: 'class_nbr',
        width: '10%',
        className: 'dt-head-center dt-body-center'
      },{
        targets: [3],
        sortable: false,
        data: 'session',
        width: '10%',
        className: 'dt-head-center dt-body-center'
      }],
      order: [0, 'desc'],
      ajax: {
        url: 'data/ajax/file.cfm',
        dataSrc: '',
        error: function(xhr, error, code) {
          $().showMsgInfo('Sorry, there was a problem trying to retrieve the data. Please try again later.');
        }
      },
    });

    $('#myInput').on( 'keyup', function () {
      table.search( this.value ).draw();
  });

});