jQuery 如何用新数据重绘DataTable
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25929347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to redraw DataTable with new data
提问by user2881063
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 :
我已经在 stackoverflow 中检查了几个关于这个主题的问题，但它们都使用旧的数据表。我正在使用数据表。我通过 NOT USING 服务器端填充了我的 DataTable，所以数据是这样预加载的（JSON）：
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 myDatawith new data i uploaded. How to reload the DataTable to reflect the changes?
我没有问题，数据表加载得很好。现在我想myData用我上传的新数据重新填充它。如何重新加载 DataTable 以反映更改？
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.
这仍然不起作用。
回答by SSA
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.
您必须先清除表格，然后使用 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
});
Also if you want to find a mapping between old and new datatable API functions bookmark this
此外，如果你想找到新的老的DataTable API函数之间的映射书签此
回答by Skeets
The accepted answer calls the drawfunction twice. I can't see why that would be needed. In fact, if your new data has the same columns as the old data, you can accomplish this in one line:
接受的答案调用该draw函数两次。我不明白为什么需要这样做。事实上，如果您的新数据与旧数据具有相同的列，您可以在一行中完成此操作：
datatable.clear().rows.add(newData).draw();
回答by brykneval
I was having same issue, and the solution was working but with some alerts and warnings so here is full solution, the key was to check for existing DataTable object or not, if yes just clear the table and add jsonData, if not just create new.
我遇到了同样的问题，该解决方案正在运行，但有一些警报和警告，所以这里是完整的解决方案，关键是检查现有的 DataTable 对象是否存在，如果是，只需清除表并添加 jsonData，如果不是则创建新的.
var table;
if ($.fn.dataTable.isDataTable('#example')) {
table = $('#example').DataTable();
table.clear();
table.rows.add(jsonData).draw();
}
else {
table = $('#example').DataTable({
"data": jsonData,
"deferRender": true,
"pageLength": 25,
"retrieve": true,
Versions
版本
- JQuery: 3.3.1
- DataTable: 1.10.20
- jQuery：3.3.1
- 数据表：1.10.20
回答by vlasiliy
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();
});
回答by sankyyy
Another alternative is
另一种选择是
dtColumns[index].visible = false/true;
To show or hide any column.
显示或隐藏任何列。
回答by Den Pat
If you want to refresh the table without adding new data then use this:
如果您想在不添加新数据的情况下刷新表，请使用以下命令：
First, create the API variable of your table like this:
首先，像这样创建表的 API 变量：
var myTableApi = $('#mytable').DataTable(); // D must be Capital in this.
And then use refresh code wherever you want:
然后在任何地方使用刷新代码：
myTableApi.search(jQuery('input[type="search"]').val()).draw() ;
It will search data table with current search value (even if it's blank) and refresh data,, this work even if Datatable has server-side processing enabled.
它将使用当前搜索值（即使它是空白的）搜索数据表并刷新数据，即使 Datatable 启用了服务器端处理也能正常工作。
