从变量重新加载dataTable

Question

我搜索了整个网络，没有找到简单的解决方法。我正在使用带有“静态”数据源的 jQuery DataTables（一个var使用SignalR填充数据，然后稍后构建DataTable）。现在，当这个数据集发生变化时，我想使用这个数据集更新表格。理想情况下，这将是一个简单的“刷新”，重新加载指定源中的数据。这是我的HTML：

<table class="table table-hover table-condensed table-responsive" id="tableAccounts">
        <thead>
            <tr>
                <th data-localize="_A_C">_A_C</th>
                <th data-localize="_Name">_Name</th>
                <th data-localize="_Address">_Address</th>
                <th data-localize="_City">_City</th>
                <th data-localize="_Phone">_Phone</th>
            </tr>
        </thead>
      <tbody></tbody>

以下是我的 JavaScript 代码，用于最初加载数据：

tAccounts = $('#tableAccounts').dataTable({
            "data": AccountAll,
            "bFilter": true,
            "pageLength": 100,
            "bSearchable": true,
            "bInfo": false,
            "columns": [
                { "data": "AccountCode" },
                { "data": "Name" },
                { "data": "Address" },
                { "data": "City" },
                { "data": "Phone" }
            ],
            "columnDefs": [
               {
                   "render": function (data, type, row) {
                       return ("0000" + data.toString(16)).slice(-4);
                   },
                   "targets": 0
               },
               { "visible": true, "targets": [0] }
            ]
        });

简述：

当数据源（在本例中为AccountAll）发生变化时，如何刷新Datatable而不破坏整个表格？如果能保留选择和过滤器，则额外加分。

更详细的说明：

“改变”可以是任何事情。新增行、删除行、单元格值的更改等。

- nighthawk

---

尝试过 draw() 吗？ - DontVoteMeDown

@DontVoteMeDown - 像这样吗？var table = $(tableAccounts).DataTable(); table.draw();？没有成功。没有重新加载/重绘。 - nighthawk

@nighthawk - 你在评论中发布的代码不会起作用，因为tableAccounts选择器是错误的。此外，你已经将datatable对象分配给tAccounts，所以你应该能够使用tAccounts.fnDraw()。请注意，我使用了v1.9语法，因为看起来这是你正在使用的版本。 - markpsmith

Answer 1

您可以使用 clear() 和 rows.add() API 方法的组合来清除现有数据并添加更新后的数据。

在这种情况下，过滤和排序将被保留。

如果您想保留当前页面，请调用 draw(false) 而不是 draw()，但是如果您要添加新行，则保留当前页面没有什么意义。

例如：

var data = [['old',2,3,4,5,6]];

var table = $('#example').DataTable({
    'data': data
});

var dataNew = [['new',2,3,4,5,6]];
table.clear().rows.add(dataNew).draw();

请查看此示例以获取代码和演示。

- Gyrocode.com