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函数之间的映射，请添加书签this

Answer 2

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

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

Answer 3

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

Answer 4

我遇到了同样的问题，该解决方案正在运行，但是有一些警报和警告，因此这里是完整的解决方案，关键是检查是否存在现有的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
数据表： 1.10.20

Answer 5

以下内容对我来说真的很好。我需要根据参数使用其他数据子集重绘数据表。

kubectl apply -f <filename>

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

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

Answer 6

在您的 jquery 代码中添加此代码段以销毁，使用数据表清除，如果您想每次在更改事件或任何其他事件上添加新列，它也适用于新列。

if ($.fn.DataTable.isDataTable("#dataListTable")) {
        $('#dataListTable').DataTable().clear().destroy();
    }   
    $('#dataListTable').empty();

谢谢，它对我有用，希望对你也有用

Answer 7

另一种选择是

dtColumns[index].visible = false/true;

显示或隐藏任何列。

Answer 8

如果您要刷新表而不添加新数据，请使用以下方法：

首先，如下所示创建表的API变量：

var myTableApi = $('#mytable').DataTable(); // D must be Capital in this.

然后在任何需要的地方使用刷新代码：

myTableApi.search(jQuery('input[type="search"]').val()).draw() ;

它将使用当前搜索值（即使它为空）搜索数据表并刷新数据，即使Datatable启用了服务器端处理也可以正常工作。

Answer 9

初始化：var grid = $('#dataTable').DataTable({});
摧毁：grid.destroy();
替换tbody标签的内容，例如：$('#tableBodyId').empty().append(new_data);
重新初始化：grid = $('#dataTable').DataTable({});

如何使用新数据重绘DataTable

9 个答案: