如何用新数据重绘 DataTable

Question

我已经在 stackoverflow 中检查了关于这个主题的几个问题，但它们都使用旧的 dataTable。我正在使用数据表。我通过不使用服务器端填充了我的 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

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

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

如果你的数据是静态的，那么使用这个：

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

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

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 6

如果您想在不添加新数据的情况下刷新表格，请使用：

首先，像这样创建表的 API 变量：

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

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

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

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

Answer 7

在你的 jquery 代码中添加这个 sn-p 来销毁，使用数据表清除，如果你想每次在更改事件或任何其他事件上添加新列，它也适用于新列。

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

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

Answer 8

另一种选择是

dtColumns[index].visible = false/true;

显示或隐藏任何列。

Answer 9

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

Answer 10

如果列不变，参数对象可以配置为函数。 DataTable 将随着每个值的变化而更新

"ajax": {
        "url": "/warehouse/getall",
        "type": "GET",
        "dataType": "json",
        data: function (d) {
            d.storeId = document.getElementById("StoreList").value;
            d.warehouseId = document.getElementById("WarehouseList").value;
        }

StoreList 和 WarehouseList 是用户组合。

然后随着每次组合更改，DataTable 都会使用当前值更新

$("#WarehouseList").change(function () {
    $("#tblData").DataTable().ajax.reload();
});