javascript - 从变量重新加载数据表

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

tl;博士;

如何在数据源(本例中为 AccountAll)更改时刷新数据表而不破坏整个表？如果保留选择和过滤器，则加分。

改变可以是任何事情。添加新行、删除行、更改单元格值。

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

参见 this example代码和演示。