如何用新的 JSON 数据手动更新数据表

我正在使用插件 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' }
]
});

现在。在执行一些操作之后，我想使用 ajax 获得新的数据(但不是 ajax 选项内置在数据表中——不要误解我的意思!)并用这些数据更新表格。我怎样才能使用数据表 API 做到这一点？文档非常混乱，我找不到解决方案。我们会非常感激你的帮助。谢谢。

192498 次浏览
小开

你可使用:

$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);

Jsfiddle

更新。是的，当前的文档不是很好，但是如果你可以使用旧版本，你可以参考 遗留文件。

小开
最佳答案

解决方案: (注意: 此解决方案适用于可数据表版本1.10.4(目前) ，不适用于遗留版本)。

CLARIFICATION Per the API 文档 (1.10.15), the API can be accessed three ways:

  1. DataTables 的现代定义(大写驼峰大小写) :

    var datatable = $( selector ).DataTable();

  2. DataTables 的遗留定义(小骆驼大小写) :

    var datatable = $( selector ).dataTable().api();

  3. 使用 new语法。

    var datatable = new $.fn.dataTable.Api( selector );

然后像这样加载数据:

$.get('myUrl', function(newDataArray) {
datatable.clear();
datatable.rows.add(newDataArray);
datatable.draw();
});

在数据更新后，使用 draw(false)保持在同一页面上。

API 参考资料:

Https://datatables.net/reference/api/clear

Https://datatables.net/reference/api/rows.add

Https://datatables.net/reference/api/draw

小开

在我的例子中，我没有使用内置的 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).

然后我在 on load 方法中实例化我的表

$(function () {
//.... some code here
table = $("#detailReportTable").DataTable();
.... more code here
});

最后，在处理刷新的函数中，我调用 clear ()和 delete ()方法，将数据提取到 html 表中，并重新实例化数据表，如下所示:

function getOrderDetail() {
table.clear();
table.destroy();
...
$.ajax({
//.....api call here
});
....
table = $("#detailReportTable").DataTable();
}

我希望有人觉得这有用！

小开

以下是遗留数据表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);
小开

您需要销毁旧的数据表实例，然后重新初始化数据表

首先使用 $. fn.dataTable.isDataTable检查数据表实例是否存在

如果存在，那么销毁它，然后创建这样的新实例

    if ($.fn.dataTable.isDataTable('#dataTableExample')) {
$('#dataTableExample').DataTable().destroy();
}


$('#dataTableExample').DataTable({
responsive: true,
destroy: true
});

提交答案