将数据表ajax请求绑定到不同的按钮答案

【问题标题】：Binding datatables ajax request to different button将数据表ajax请求绑定到不同的按钮
【发布时间】：2019-04-21 15:41:42
【问题描述】：

我有一个配置为的数据表

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(); 通过堆栈跟踪。

谁能帮忙？

【问题讨论】：

标签： jquery ajax datatable datatables datatables-1.10

【解决方案1】：

我想建议你将ajax option 作为一个函数。在该函数中检查#tagSearchInput 或.input-advance-search 的值并将其与data 一起附加。然后使用jquery ajax api进行ajax调用并传递新的自定义数据。

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

由于draw() 方法，该ajax 调用正在发生。这是因为启用服务器端处理后，draw() 将始终触发重新加载。 clear() 也不会清空表，因为它是客户端函数。更多信息请查看processing modes part of the manual。

【讨论】：