Search method not working for Ajax data?

ajay.g415

I'm using the textboxes search from the below url and modified it slightly for my project requirement.

https://datatables.net/examples/api/multi_filter.html

It use to work perfectly when I have this static datatable, but when I connect to my db and get dynamic json data through ajax it stopped working.

Will search method works only with static table? Below is my javascript code..

$(document).ready(function() {

  var colConf = [
    { "data": "id", 'filter': false },
    { "data": "name" },
    { "data": "username" },
    { "data": "email" },
    { "data": "website" }
  ];
  var table = $('#example').DataTable({
    'ajax': 'data.json',
    'bFilter': false,
    'columns': colConf
  });

  var filterStr = '<tr class="pca-dt-filter">';
  $('#example thead th').each(function(i, ele) {
    var title = $(this).text();
    if (colConf[i].filter || colConf[i].filter == undefined)
      filterStr += '<th class="col-"+i><input type="text" placeholder="Search ' + title + '" /></th>';
    else
      filterStr += '<th class="col-"+i></th>';
  });
  filterStr += '</tr>';
  $('#example thead').append(filterStr);


  table.columns().every(function() {
    var that = this;

    $('input', this.footer()).on('keyup change', function() {
      if (that.search() !== this.value) {
        that.search("^" + this.value, true, false, true).draw();
      }
    });
  });
});

kthorngren

I probably need to move you loop that builds the search inputs into the initComplete option. Since ajax is an async option your build of the select inputs takes place before Datatables receives the ajax response. Moving it to initComplete will wait until the ajax response is returned and Datatables has built the table.

Kevin