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

问题描述

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

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 表）的语法是什么？谢谢

解决方法

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

所以，而不是这样：

"data" : myData

应该是这样的：

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

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

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

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

documentation 显示了一个使用 jQuery extend 的示例：

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

您不需要使用$.extend。您只需要注意不要覆盖 Datatables 生成的请求数据。

另一种处理方法是简单地将数据附加到由 d 中的 "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>

这个例子的关键点是：

有 2 个不同的 URL。第一个在创建数据表时使用。点击按钮时使用第二个。
对于这两个 URL，有 2 组不同的请求数据。

使用这种方法，您可以使用不同的 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( {},{ "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" }

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

Convert form data to JavaScript object with jQuery

ajax datatables