如何在不重新初始化的情况下使用新的 url 和一些参数重新加载数据表

Question

我知道我可以使用 ajax.url 对数据 table 发出 ajax 请求，例如 this :

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

...

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

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

我不想破坏和重新初始化数据table以便使用:

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

我该怎么办？使用现有初始化 table 的语法是什么（这里是 js var table）？谢谢

Answer 1

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

所以，而不是这个：

"data" : myData

应该是这样的：

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

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

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

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

documentation 显示了一个示例，使用 jQuery extend:

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

您不需要使用$.extend。您只需要注意不要覆盖 Datatables.

生成的请求数据

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

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

更新更详细的例子

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

HTML，显示table和一个按钮。该按钮是我测试调用新 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>

本例中的重点是：

有 2 个不同的 URL。创建 DataTables 时使用第一个。单击按钮时使用第二个。
有 2 组不同的请求数据，用于两个 URLs。

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

处理表单数据

这是一个简单的 HTML 表格：

<form id="filter-form">
    City:<input type="text" id="city" name="city">
    Country:<input type="text" id="country" name="country">
    <input type="submit" value="Submit">
</form>

为了测试，我有以下 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

而是以 name/value 对的数组形式提供：

&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" }

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

Convert form data to JavaScript object with jQuery

如何在不重新初始化的情况下使用新的 url 和一些参数重新加载数据表

How to reload datatable by using new url and some parameters without reinitialize it

ajax

datatables