如何使用新数据重绘DataTable

问题描述 投票:39回答:4

我已经在stackoverflow中检查了有关此主题的几个问题,但它们都使用旧的dataTable。我正在使用DataTable。我通过NOT USING服务器端填充了我的DataTable,因此预加载数据(JSON)如下:

datatable = $("#datatable").DataTable({
   data  : myData,
   moreoptions : moreoptions
});

我没有遇到任何问题,DataTable加载得很好。现在我想用我上传的新数据重新填充myData。如何重新加载DataTable以反映更改?

这是我到目前为止所尝试的:

$('#upload-new-data').on('click', function () {
   myData = NewlyCreatedData; // I console logged this NewlyCreatedData, and it has my uploaded data.

   datatable.draw(); // Redraw the DataTable
});

但这不起作用。我也试过这个:

datatable = $("#datatable").DataTable({
   "data"  : myData,
   "drawCallback" : function () {
      myData = NewlyCreatedData;
   },
   "moreoptions" : moreoptions,
});

然后在上传时我只需调用重绘触发器:

$('#upload-new-data').on('click', function () {
   datatable.draw(); // Redraw the DataTable
});

这仍然不起作用。

jquery datatables
4个回答
51
投票

您必须首先清除表,然后使用row.add()函数添加新数据。最后一步调整列大小,以便表格正确呈现。

$('#upload-new-data').on('click', function () {
   datatable.clear().draw();
   datatable.rows.add(NewlyCreatedData); // Add new data
   datatable.columns.adjust().draw(); // Redraw the DataTable
});

此外,如果要查找旧的和新的数据表API函数之间的映射,请添加书签this


21
投票

接受的答案称为draw函数两次。我不明白为什么需要这样做。实际上,如果您的新数据与旧数据具有相同的列,则可以在一行中完成此操作:

datatable.clear().rows.add(newData).draw();

1
投票
datatable.rows().iterator('row', function ( context, index ) {
    var data = this.row(index).data();
    var row = $(this.row(index).node());
    data[0] = 'new data';
    datatable.row(row).data(data).draw();
});

0
投票

另一种选择是

dtColumns[index].visible = false/true;

显示或隐藏任何列。

© www.soinside.com 2019 - 2024. All rights reserved.