我已经在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
});
这仍然不起作用。
您必须首先清除表,然后使用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
接受的答案称为draw
函数两次。我不明白为什么需要这样做。实际上,如果您的新数据与旧数据具有相同的列,则可以在一行中完成此操作:
datatable.clear().rows.add(newData).draw();
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();
});
另一种选择是
dtColumns[index].visible = false/true;
显示或隐藏任何列。