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

Question

我正在使用插件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 来做到这一点？文档非常混乱，我找不到解决方案。任何帮助将不胜感激。谢谢。

Answer 1

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

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

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

Answer 2

您可以使用：

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

Jsfiddle

更新。是的，当前的文档不是很好，但是如果您可以使用旧版本，您可以参考 legacy documentation.

Answer 3

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

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

如果存在则销毁它然后像这样创建新实例

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

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

Answer 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);

Answer 5

在我的例子中，我没有使用内置的 ajax api 将 Json 提供给表（这是由于在数据表的渲染回调中很难实现的一些格式化）。

我的解决方案是在 onload 函数和处理数据刷新的函数的外部范围内创建变量（例如

var table = null

）。

然后我在加载方法中实例化我的表

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

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

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

我希望有人觉得这有用！

Answer 6

我知道我的回答与问题没有直接关系，但我花了很多时间在较新版本的数据表中寻找做同样事情的方法，所以我希望我的例子将来能节省别人的时间

const table = js('#tbllist').DataTable({
    columns: [
        {data: 'createDate'},
        {data: 'status'},
        {data: 'paymentType'},
        {data: 'currency'},
        {data: 'amount'}
    ]
});

// Assume that this array has objects of new data with structure defined above
const arr = [] 

// These will update table
table.clear();
table.rows.add(arr);
table.draw();