如何使用新的 url 和一些参数重新加载数据表而不重新初始化它

Question

我知道我可以使用 ajax.url 对数据表发出 ajax 请求，如下所示：

var table = $('#example').DataTable( {
    ajax: "/mylink"
} );

...

table.ajax.url( 'newData.json' ).load();

但是如何使用相同的语法将数据作为参数传递给 url？我尝试一下table.ajax.url( 'mylink' ).data(myData).load();。显然这不是解决方案。

我不想为了使用而破坏并重新初始化数据表：

...
"ajax" : {
        "url" : "mylink",
        "data" : myData
 }
 ...

我该怎么办？使用现有初始化表（此处为 js var 表）的语法是什么？谢谢

Answer 1

在 DataTables部分中，您可以ajax使用函数形式，而不是使用选项的对象形式。这允许您为每个新的 ajax 调用动态传递请求数据。data

所以，而不是这个：

"data" : myData

会是这样的：

"data": function () {
  return myData;
}

而且，正如您已经注意到的，您可以使用该ajax.url()调用来指定新的 URL：

table.ajax.url( 'newData.json' ).load();

警告：这假设您没有使用服务器端处理，因为这将覆盖由 DataTables 自动生成的服务器端请求数据。如果您使用服务器端处理，则必须将自定义数据合并到预先存在的请求数据中。

该文档显示了一个使用 jQuery 的示例extend：

"data": function ( d ) {
  return $.extend( {}, d, {
    "extra_search": $('#extra').val()
  } );
}

你不需要使用$.extend. 您只需要小心，不要覆盖数据表生成的请求数据。

d处理此问题的另一种方法是将数据简单地附加到in表示的数据结构中"data": function ( d )：

"data": function ( d ) {
  d.extra_search = $('#extra').val();
}

更新更详细的示例

这是一个完整的示例，如果您愿意，您可以将其复制到 html 文件中并自行运行。它使用来自虚拟 JSON 提供程序的数据，仅用于测试。

HTML，显示表格和按钮。该按钮是我测试调用新 URL 并将新请求参数传递到该新 URL 的能力的方式：

<div style="margin: 20px;">
    <button id="button_one" type="button">Resubmit</button>
    <br><br>
    <table id="example" class="display" style="width:100%"></table>
</div>

以下是包含 DataTable 定义和调用新 URL（带有新请求参数）的函数的相关脚本：

<script>

$(document).ready(function() {

  // ajax for initial table creation:
  var requestUrl = "https://jsonplaceholder.typicode.com/posts";
  var requestData = { "name": "Abel", "location": "here" };

  var table = $('#example').DataTable( {
    ajax: {
      method: "GET",
      url: requestUrl,
      "data": function ( ) {
        return requestData;
      },
      dataSrc: "",  
    },
    "columns": [
      { "title": "User ID", "data": "userId" },
      { "title": "ID", "data": "id" },
      { "title": "Title", "data": "title" }
    ]
            
  } );
  
  $("#button_one").click(function() {
    // subsequent ajax call, with button click:
    requestUrl = "https://jsonplaceholder.typicode.com/todos";
    requestData = { "name": "Charlie", "location": "there" };
    table.ajax.url( requestUrl ).load();
  });
  
} );

</script>

这个例子的关键点是：

1. 有 2 个不同的 URL。第一个在创建 DataTables 时使用。单击按钮时使用第二个。

2. 对于两个 URL，有 2 组不同的请求数据。

使用这种方法，您可以使用table.ajax.url( requestUrl ).load()不同的 URL 和不同的请求数据集重复调用，而无需销毁 DataTable。

处理表单数据

这是一个简单的 HTML 表单：

"data" : myData

为了进行测试，我使用以下 JavaScript 将表单的内容捕获到数组中：

var form_data = [];

$( "#filter-form" ).submit(function( event ) {
  event.preventDefault();
  form_data = $( this ).serializeArray();
  table.ajax.url( url ).load();
});

最终结果是变量中的数据如下form_data：

[
  {
    "name": "city",
    "value": "Berlin"
  },
  {
    "name": "country",
    "value": "Germany"
  }
]

现在我可以将该数据合并到自动创建的服务器端请求数据中。这是我可以选择使用$.extend()上面提到的功能的地方：

  $('#example').DataTable( {
    serverSide: true,
    ajax: { 
      method: "POST",
      url: url, // from a variable
      data: function( d ) {
        return $.extend( {}, d, { "my_extra_data": form_data } );
      }
    },
    ... //whatever else is in your DataTable definition...
  });

该函数会产生如下所示的请求数据：

{
    "draw": "2",
    "columns[0][data]": "id",
    "columns[0][name]": "",
      ...
    "start": "0",
    "length": "10",
    "search[value]": "",
    "search[regex]": "false",
    "my_extra_data[0][name]": "city",
    "my_extra_data[0][value]": "Berlin",
    "my_extra_data[1][name]": "country",
    "my_extra_data[1][value]": "Germany"
}

您可以看到您的my_extra_data值与服务器端自动生成的请求数据一起包含在内。所有这些都会作为您请求的一部分发送到服务器。

如果您正在使用，POST那么它位于请求正文中。

如果您使用的是GET，那么它是相同的数据 - 但作为查询字符串添加到 URL 中。

在这两种情况下，它都会转换为表单数据使用的标准字符串表示形式。

然后由服务器端代码以通常的方式访问这些数据。

注意：您可能希望按如下方式提供 URL 编码的表单数据：

...&city=Berlin&country=Germany

但它是以名称/值对数组的形式提供的：

&my_extra_data%5B0%5D%5Bvalue%5D=Berlin&my_extra_data%5B1%5D%5Bname%5D=country&my_extra_data%5B1%5D%5Bvalue%5D=Germany

因此，需要额外的服务器端工作来解析这些数据。

如果您想将表单数据直接转换为 JavaScript 对象，如下所示：

{ "city": "Berlin", "country", "Germany" }

然后看看这个问题的答案：

使用 jQuery 将表单数据转换为 JavaScript 对象