datatables - 更新表时运行 DataTables 的 ajax() 函数

Question

我有一个 DataTables，根据文档，我正在对 AJAX 返回的数据采取其他操作，例如：

var table = $('#statstable').DataTable( {
    ajax: function (data, callback, settings) {
        $.ajax({
            url: "/api/stats/2020/01/",
        }).then ( function(json) {
            var data = json;
            $("#total_in_month").text(json.total_in_month);
            callback(data);

        });
    },
    search: false,
);

我使用的源格式如下：

{
    "total_in_month": 1636, 
    "data": [
        {"total_on_date": 47, "date": "01-01-2020", "externals": 1}, 
        {"total_on_date": 47, "date": "02-01-2020", "externals": 1}, 
        {"total_on_date": 48, "date": "03-01-2020", "externals": 1}, 
        {"total_on_date": 48, "date": "04-01-2020", "externals": 1}, 
        {"total_on_date": 49, "date": "05-01-2020", "externals": 1}, 
        {"total_on_date": 48, "date": "06-01-2020", "externals": 3}, 
        {"total_on_date": 47, "date": "07-01-2020", "externals": 3}, 
        {"total_on_date": 48, "date": "08-01-2020", "externals": 1}, 
        ...
    ]
}

一切正常，即我的 DataTable 已正确填充，并且total_in_month页面加载时 span 已正确更新。

但是，我想动态更改表中的数据，但也要在表外的跨度“total_in_month”中。

所以我使用了类似的东西$("#statstable").DataTable().ajax.url("/api/stats/" + year + "/" + month + "/").load();，它可以工作，但这不允许我更新total_in_month.

知道如何解决这个问题吗？

我尝试再次调用 $('#statstable').DataTable( { ajax: function (data, callback, settings) { ...，但会产生错误Cannot reinitialise DataTable。

标签： datatables

Answer 1

您可以使用一个变量作为您的 URL 源，以及table.ajax.reload(), 以每次从新 URL 重新填充表和跨度：

$(document).ready(function() {

  // my test URLs are http://localhost:7000/stats/1 and http://localhost:7000/stats/2
  var base_url = "http://localhost:7000/stats/";
  var full_url = base_url + '1';
 
  var table = $('#statstable').DataTable( {
    ajax: function (data, callback, settings) {
      $.ajax({
        url: full_url,
      }).then ( function(json) {
        var data = json;
        //console.log( json.total_in_month );
        $("#total_in_month").text(json.total_in_month);
        callback(data);
      });
    },

    search: false,
    columns: [
      { data: "total_on_date" },
      { data: "date" },
      { data: "externals" }
    ]
  });

  // a demo of changing the URL and re-displaying the table and span
  // data from the new URL:
  setInterval( function () {
    full_url = base_url + '2';
    table.ajax.reload();
  }, 3000 );

} );

就我而言，我使用了一个只有一个变量的简单测试 URL：

var base_url = "http://localhost:7000/stats/";
var full_url = base_url + '1';

您需要针对您的 URLyear和month值进行调整。

在我的示例代码中，仅出于演示目的，页面从 填充http://localhost:7000/stats/1，3 秒后，页面自动更新为http://localhost:7000/stats/2. 这适用于表和跨度。