Search method not working for Ajax data?

Search method not working for Ajax data?

ajay.g415ajay.g415 Posts: 1Questions: 1Answers: 0
edited June 2018 in Free community support

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

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>';
      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 ( !== this.value) {"^" + this.value, true, false, true).draw();


  • kthorngrenkthorngren Posts: 4,601Questions: 19Answers: 1,012

    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.


Sign In or Register to comment.