如何解决如何使用新的 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" }
然后看看这个问题的答案:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。