Cfrgtkky

I have a datatable that is configured as

var table = $(".datatable").DataTable({

  processing: true,

  serverSide: true,

  ajax: {

    url: $("#datatable").attr("data-search"),

    dataType: "JSON",

    complete: function (data) {

      $(".total-records").html(data.responseJSON.recordsTotal);

      $("#maxPageText").html(`of ${table.page.info().pages} <i class="fa fa-chevron-right" style="font-weight:200;"></i>`);



    }

  },

});

table.ajax.reload();

Everything works fine, search, sort and all. But, I'm trying to make a different textbox as search which is present in modal. I am trying to send ajax request and rebuild the datatable with new data return from that particular ajax but it doesn't seem to rebuild with new data.

This is the code

$("body").on("click", ".advance-search", function () {



  var type = $(this).attr("data-type");

  var value = "";

  var search = $(this).attr("data-search");



  if (type == "tag") {

    value = $("#tagSearchInput").val();

  } else {

    value = $(".input-advance-search").val();

  }



  $.ajax({

    url: search,

    method: "GET",

    dataType: "JSON",

    data: { "type": type, "value": value, "data": table.data().ajax.params() },

    complete: function (data) {

      console.log(data.responseJSON);

      table.clear().rows.add(data.responseJSON.data).draw();

      return false;

    }

  });

  return false;

});

Notice that I have added return false in two places because right after this ajax request another ajax request is sent which seems to be from this line table.clear().rows.add(data.responseJSON.data).draw(); via stacktrace.

Can anyone help?

I would like to suggest you make ajax option as a function. And inside that function check for the value of #tagSearchInput or .input-advance-search and append it along with the data. Then make an ajax call using jquery ajax api and pass the new customized data.

var table = $(".datatable").DataTable({

  processing: true,

  serverSide: true,

  // use ajax as a function

  ajax: function (data, callback, settings) {



    // get the 'data-type' and 'data-search' attribute

    var type = $(".advance-search").attr("data-type"),

    search = $(".advance-search").attr("data-search"),

    value = "";



    if (type == "tag") {

      value = $("#tagSearchInput").val();

    } else {

      value = $(".input-advance-search").val();

    }



    // append the 'type' and 'value' in 'data'

    data.type = type;

    data.value = value;



    // make ajax call using jquery ajax api

    $.ajax({

      url: search,

      method: "GET",

      dataType: "JSON",



      // pass new customized data

      data: data,

      complete: function (data) {

        $(".total-records").html(data.responseJSON.recordsTotal);

        $("#maxPageText").html(`of ${table.page.info().pages} <i class="fa fa-chevron-right" style="font-weight:200;"></i>`);



        // call the callback function with the result

        callback(data.responseJSON.data);

      }

    });

  },

});

Now on the click event of .advance-search you have to just reload the table using draw() api.

$("body").on("click", ".advance-search", function () {

  table.draw();

});

With this approach, your code will look cleaner and elegant.

Now in context to your worry about the ajax request is being sent after another ajax request because of the following code

table.clear().rows.add(data.responseJSON.data).draw();

That ajax call is happening because of the draw() method. It is because when server-side processing enabled, a draw() will always trigger a reload. Also clear() won't empty the table since it is a client-side function. For more info check processing modes part of the manual.