Привязка datatables ajax-запроса к другой кнопке - PullRequest
Новая
       11

Привязка datatables ajax-запроса к другой кнопке

0 голосов
/ 19 ноября 2018

У меня есть таблица данных, настроенная как 

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

Все отлично работает, поиск, сортировка и все. Но я пытаюсь сделать другое текстовое поле, как поиск, который присутствует в модальном. Я пытаюсь отправить запрос ajax и перестроить данные с новыми данными, возвращаемыми из этого конкретного ajax, но, похоже, он не перестраивается с новыми данными.

Это код 

$("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;
});

Обратите внимание, что я добавил return false в двух местах, потому что сразу после этого ajax-запроса отправляется другой ajax-запрос, который, кажется, поступает из этой строки table.clear().rows.add(data.responseJSON.data).draw(); через stacktrace.

Может кто-нибудь помочь?

1 Ответ

0 голосов
/ 28 ноября 2018

Я хотел бы предложить вам сделать ajax option как функцию.А внутри этой функции проверьте значение #tagSearchInput или .input-advance-search и добавьте его вместе с data.Затем выполните ajax-вызов, используя jquery ajax api, и передайте новые настроенные данные. 

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

Теперь при событии нажатия .advance-search вам нужно просто перезагрузить таблицу, используя draw() api. 

$("body").on("click", ".advance-search", function () {
  table.draw();
});

При таком подходе ваш код будет выглядеть чище и элегантнее.

Теперь в контексте вашего беспокойства по поводу запроса ajaxотправляется после другого запроса ajax из-за следующего кода 

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

Этот вызов ajax происходит из-за метода draw().Это связано с тем, что при включенной обработке на стороне сервера draw() всегда будет вызывать перезагрузку.Также clear() не будет очищать таблицу, поскольку это функция на стороне клиента.Для получения дополнительной информации проверьте Обработка режимов часть руководства .

...