jQuery 如何使用新的 JSON 数据手动更新数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27778389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to manually update datatables table with new JSON data
提问by Indy
I am using plugin jQuery datatablesand load my data which I have loaded in DOM at the bottom of page and initiates plugin in this way:
我正在使用插件jQuery数据表并加载我在页面底部的 DOM 中加载的数据并以这种方式启动插件：
var myData = [
{
"id": 1,
"first_name": "John",
"last_name": "Doe"
}
];
$('#table').dataTable({
data: myData
columns: [
{ data: 'id' },
{ data: 'first_name' },
{ data: 'last_name' }
]
});
Now. after performing some action I want to get new data using ajax (but not ajax option build in datatables - don't get me wrong!) and update the table with these data. How can i do that using datatables API? The documentation is very confusing and I can not find a solution. Any help will be very much appreciated. Thanks.
现在。执行某些操作后，我想使用 ajax 获取新数据（但不是数据表中的 ajax 选项 - 不要误会！）并使用这些数据更新表。我如何使用数据表 API 做到这一点？文档非常混乱，我找不到解决方案。任何帮助将不胜感激。谢谢。
回答by Indy
SOLUTION:(Notice: this solution is for datatables version 1.10.4 (at the moment) not legacy version).
解决方案：（注意：此解决方案适用于数据表版本 1.10.4（目前）而不是旧版本）。
CLARIFICATIONPer the API documentation(1.10.15), the API can be accessed three ways:
澄清根据API 文档(1.10.15)，可以通过三种方式访问 API：
The modern definition of DataTables (upper camel case):
var datatable = $( selector ).DataTable();The legacy definition of DataTables (lower camel case):
var datatable = $( selector ).dataTable().api();Using the
newsyntax.var datatable = new $.fn.dataTable.Api( selector );
DataTables 的现代定义（驼峰大写）：
var datatable = $( selector ).DataTable();DataTables 的旧定义（驼峰小写）：
var datatable = $( selector ).dataTable().api();使用
new语法。var datatable = new $.fn.dataTable.Api( selector );
Then load the data like so:
然后像这样加载数据：
$.get('myUrl', function(newDataArray) {
datatable.clear();
datatable.rows.add(newDataArray);
datatable.draw();
});
API references:
API参考：
https://datatables.net/reference/api/clear()
https://datatables.net/reference/api/clear()
https://datatables.net/reference/api/rows.add()
https://datatables.net/reference/api/rows.add()
回答by Vladimirs
You can use:
您可以使用：
$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);
Update. And yes current documentation is not so good but if you are okay using older versions you can refer legacy documentation.
更新。是的，当前的文档不是很好，但是如果您可以使用旧版本，则可以参考旧文档。
回答by Om Sharma
You need to destroy old data-table instance and then re-initialize data-table
您需要销毁旧的数据表实例，然后重新初始化数据表
First Check if data-table instance exist by using $.fn.dataTable.isDataTable
首先使用$.fn.dataTable.isDataTable检查数据表实例是否存在
if exist then destroy it and then create new instance like this
如果存在则销毁它，然后像这样创建新实例
if ($.fn.dataTable.isDataTable('#dataTableExample')) {
$('#dataTableExample').DataTable().destroy();
}
$('#dataTableExample').DataTable({
responsive: true,
destroy: true
});
回答by Vikas
Here is solution for legacy datatable 1.9.4
这是旧数据表 1.9.4 的解决方案
var myData = [
{
"id": 1,
"first_name": "Andy",
"last_name": "Anderson"
}
];
var myData2 = [
{
"id": 2,
"first_name": "Bob",
"last_name": "Benson"
}
];
$('#table').dataTable({
// data: myData,
aoColumns: [
{ mData: 'id' },
{ mData: 'first_name' },
{ mData: 'last_name' }
]
});
$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);
回答by jorge cordero
In my case, I am not using the built in ajax api to feed Json to the table (this is due to some formatting that was rather difficult to implement inside the datatable's render callback).
就我而言，我没有使用内置的 ajax api 将 Json 提供给表（这是由于某些格式在数据表的渲染回调中很难实现）。
My solution was to create the variable in the outer scope of the onload functions and the function that handles the data refresh (var table = null, for example).
我的解决方案是在 onload 函数和处理数据刷新的函数（var table = null例如）的外部范围内创建变量。
Then I instantiate my table in the on load method
然后我在加载方法中实例化我的表
$(function () {
//.... some code here
table = $("#detailReportTable").DataTable();
.... more code here
});
and finally, in the function that handles the refresh, i invoke the clear() and destroy() method, fetch the data into the html table, and re-instantiate the datatable, as such:
最后，在处理刷新的函数中，我调用 clear() 和 destroy() 方法，将数据提取到 html 表中，并重新实例化数据表，如下所示：
function getOrderDetail() {
table.clear();
table.destroy();
...
$.ajax({
//.....api call here
});
....
table = $("#detailReportTable").DataTable();
}
I hope someone finds this useful!
我希望有人觉得这很有用！
