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

Posted 2023-05-07

【中文标题】如何使用新的 url 和一些参数重新加载数据表而不重新初始化它

【英文标题】：How to reload datatable by using new url and some parameters without reinitialize it

【发布时间】：2021-05-20 10:14:47

【问题描述】：

我知道我可以使用 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 表）的语法是什么？ 谢谢

【参考方案1】：

在您的 DataTables ajax 部分，您可以使用 function 形式，而不是使用 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，显示表格和按钮。该按钮是我测试调用新 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 时使用。单击按钮时使用第二个。

对于两个 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( , 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" 

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

Convert form data to JavaScript object with jQuery

【讨论】：

我想用table.ajax.url('newData.json').load();带有 url 和参数（我必须传递的数据）。恐怕你的回答目前对我没有帮助，或者我不明白你的解决方案

我提供了一个更详细的示例，展示了该方法。让我知道这是否澄清了我的答案 - 或没有。当然，如果我误解了你想要做的事情，请告诉我。

感谢@andrewjames 的解释。在我的情况下，它是从服务器端加载的，当我应用 table.ajax.url('myurl'+"?filter_author="+filter_author).load() 时它可以工作。第一次初始化仅使用 url“myurl”。但问题是我需要发送更多参数。这些来自形式。所以使用 & 和 ? 将每个参数添加到 url 会很痛苦。这就是为什么我要求一种简单的方法来做到这一点。

你能解释一下“它是从服务器端加载的”是什么意思吗？这是否意味着您的 DataTable 正在使用serverSide: true？还是有别的意思？ （您不需要使用 ? 和 & 构建字符串 - 您可以使用我提供的方法 - 但需要进行一些更改以说明表单中的数据和 serverSide，如果您正在使用它）。

是的，我的意思是 serverside:true.` 但是对表单中的数据和 serverSide 进行了一些更改，那么我需要对表单数据进行哪些更改？当我检查您的解决方案时，按钮单击的 ajax 请求没有提交数据。