jquery - 如何用新数据重绘DataTable

Question

我已经在 stackoverflow 中检查了有关此主题的几个问题，但它们都使用旧的数据表。我正在使用数据表。我通过不使用服务器端来填充数据表，因此数据是预加载的(JSON)，如下所示:

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

我没有遇到任何问题，数据表加载得很好。现在我想用我上传的新数据重新填充 myData 。如何重新加载数据表以反射(reflect)更改？

这是我迄今为止尝试过的:

$('#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
});

这仍然不起作用。

Answer 1

您必须首先清除表格，然后使用 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 之间的映射