如何在没有 destroy() 的情况下重新初始化 Datatable答案

【问题标题】：How to reinitialise Datatable without destroy()如何在没有 destroy() 的情况下重新初始化 Datatable
【发布时间】：2019-08-02 07:33:32
【问题描述】：

我正在尝试重新初始化数据表而不破坏它。销毁表的问题在于它会重新加载搜索过滤器并给屏幕带来闪烁效果。

我只想重新加载我的表数据，而不重新呈现搜索表大小和分页过滤器。

var table = $('#clinic_List').DataTable({
  "deferRender": true
});

table.destroy();
setTimeout(function () {
  datatable.DataTable.init();
}, 1000);

【问题讨论】：

您从何处以及如何获取数据？你试过什么？你见过这个：datatables.net/reference/option/ajax 吗？还有这个：datatables.net/reference/api/ajax.reload()?
我在 reactjs 应用程序中使用它，所以我没有从 ajax 获取数据
那么你从哪里得到数据呢？静态表？ Javascript？
没有来自 web api Asp.net core

标签： jquery datatable datatables

【解决方案1】：

你可以使用 ajax.reload()

table.ajax.reload();

或

$('#clinic_List').DataTable({"deferRender": true}).ajax.reload();

【讨论】：

我没有使用 ajax 调用，所以我不能使用 ajax.reload() 因为它给了我错误，无法将 null 的数据解析为 ajax 。数据未定义
在链接中他们使用了 destroy 我不想使用 destroy

【解决方案2】：

您可以使用 Datatables API rows().remove() 或 clear() 删除，然后使用 rows.add() 添加需要的行，这基本上是 ajax.reload() 所做的，只是为了所有行。

最后我们使用 Datatables API draw()：

虽然上述 API 仅在内部清除/删除数据，但该操作在调用 draw() 方法进行更新之前不会在视觉上显示显示器。该方法可以简单地作为链式方法调用。

Datatables API draw() 具有一 (1) 个参数来确定 DataTables 将执行哪种绘制：

完全重置或true（默认）

the ordering and search will be recalculated and the rows redrawn in their new positions. The paging will be reset back to the first page。

完全保留或false

the ordering and search will be recalculated and the rows redrawn in their new positions. The paging will not be reset - i.e. the current page will still be shown。

页面

ordering and search will not be updated and the paging position held where is was. This is useful for paging (i.e. page()) when data has not been changed between draws。

请注意，字符串选项需要 DataTables 1.10.8 或较新。以前的版本只支持布尔选项。

你可以使用table.draw("full-hold")或table.draw(false)，它会重绘表格而不需要重置搜索、排序和分页.

例子：

var person = [
    {name:"person1"},
    {name:"person2"},
    {name:"person3"},
    {name:"person4"}
];

// Create table with data set
var table = $('#example').DataTable( {
    data: person,
    columns:[
     {"data" :"name"}
    ]
} );

table.clear().rows.add(person).draw(false);

如果您的数据源发生更改（例如更新列值），那么您可以考虑使用 Datatables API rows().invalidate()。笔记这不适合添加到数据源的新数据。在这里找到样本Jsfiddle

演示 clear() 和 rows.add() 方法：

var person = [
    {name:"person1"},
    {name:"person2"},
    {name:"person3"},
    {name:"person4"}
];
 
// Create table with data set
var table = $('#example').DataTable( {
    data: person,
    columns:[
     {"data" :"name"}
    ]
});


document.getElementById("create").onclick = function() { addData() }; 
document.getElementById("refresh").onclick = function() { refreshTab() };

function addData() {
  person.push( {name:"new person"} );
} 

function refreshTab() {
 table.clear().rows.add(person).draw(false);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<button id="create">Create row</button>
<button id="refresh">Refresh table</button>
<table id="example" class="display" style="width:100%"></table>

【讨论】：