如何用新数据重绘DataTable [英] How to redraw DataTable with new data

问题描述

我已经在 stackoverflow 中检查了几个关于这个主题的问题，但它们都使用旧的数据表.我正在使用数据表.我通过 NOT USING 服务器端填充了我的 DataTable，所以数据是这样预加载的(JSON):

I have checked several questions already about this topic here in stackoverflow, but they are all using the old dataTable. I am using DataTable. I populated my DataTable by NOT USING server side, so data are preloaded (JSON) like this :

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

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

I didn't have a problem with that, the DataTable loaded just fine. Now I want to re-populate that myData with new data i uploaded. How to reload the DataTable to reflect the changes?

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

Here's what I have tried so far :

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

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

但这行不通.我也试过这个:

But this doesn't work. I also tried this :

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

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

Then on upload I just call the redraw trigger :

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

还是不行.

推荐答案

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

You have to first clear the table and then add new data using row.add() function. At last step adjust also column size so that table renders correctly.

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

Also if you want to find a mapping between old and new datatable API functions bookmark this

这篇关于如何用新数据重绘DataTable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！