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

问题描述

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

  datatable = $（＃ datatable）。DataTable（{
 data：myData，
 moreoptions：moreoptions 
}）; 
  

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

这是我迄今为止所尝试的：

  $（'＃upload-new-data'）。on（'click'，function（）{
 myData = NewlyCreatedData; //我控制台记录了这个NewlyCreatedData，它有我的上传数据。
 
 datatable.draw（）; //重绘DataTable 
}）; 
  

但这不行。我也尝试过：

  datatable = $（＃datatable）DataTable（{
data myData，
drawCallback：function（）{
 myData = NewlyCreatedData; 
}，
moreoptions：moreoptions，
}）; 
  

然后上传我只是调用重绘触发器：

$ b $ （'click'，function（）{
datatable.draw（）; //重绘DataTable
}）;

仍然这不行。

解决方案

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

  $（'＃upload-new-data'）。on （'click'，function（）{
 datatable.clear（）。draw（）; 
 datatable.rows.add（NewlyCreatedData）; //添加新数据
 datatable.columns.adjust （）.draw（）; //重绘DataTable 
}）; 
  

另外，如果要查找旧的和新的datatable API函数之间的映射书签这个

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

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

Still this doesn't work.

解决方案

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

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

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