如何使用新的JSON数据手动更新datatables

Question

我正在使用plugin jQuery datatables并加载我在页面底部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做到这一点？留档很混乱，我找不到解决办法。任何帮助将非常感谢。谢谢。

Answer 1

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

首先使用$检查数据表实例是否存在。fn。数据表。ISDATABLE

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

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

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

Answer 2

您可以使用：

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

jsfiddle

使现代化是的，当前的文档不是很好，但是如果您可以使用旧版本，您可以参考遗留文档。

Answer 3

解决方案：（注意：此解决方案适用于datatables版本1.10.4（目前），而不是旧版本）。

根据API文件（1.10.15）的澄清，可通过三种方式访问API：

>

var datatable=$（选择器）。DataTable（）

数据表的传统定义（小写）：

var datatable=$（选择器）。dataTable（）。api（）

使用new语法。

var datatable=new$。fn。数据表。Api（选择器）

然后按如下方式加载数据：

$.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()