时间戳

首页 > 解决方案 > 将数据表ajax请求绑定到不同的按钮

jquery - 将数据表ajax请求绑定到不同的按钮

问题描述

我有一个配置为的数据表

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

任何人都可以帮忙吗？

标签： jqueryajaxdatatabledatatablesdatatables-1.10

解决方案

我想建议你将ajax 选项作为一个函数。在该函数内部检查#tagSearchInputor的值.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调用正在发生。这是因为当启用服务器端处理时，adraw()总是会触发重新加载。也clear()不会清空表格，因为它是客户端功能。有关更多信息，请查看手册中的处理模式部分。

推荐阅读