如何使用新数据重绘DataTable

Question

我已经在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
});

这仍然不起作用.

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函数之间的映射本

Answer 2

接受的答案会调用该draw函数两次.我不明白为什么需要这样做.实际上,如果您的新数据与旧数据具有相同的列,则可以在一行中完成此操作:

datatable.clear().rows.add(newData).draw();

Answer 3

我遇到了同样的问题，解决方案正在工作，但有一些警报和警告，所以这里是完整的解决方案，关键是检查是否存在现有的 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,

版本

• jQuery：3.3.1
• 数据表：20.10.1

Answer 4

以下对我来说非常有效。我需要根据参数使用不同的数据子集重新绘制数据表。

table.ajax.url('NewDataUrl?parameter=' + param).load();

如果您的数据是静态的，请使用：

table.ajax.url('NewDataUrl').load();