Question

我试图在不破坏数据表的情况下重新初始化它。销毁表格的问题在于，它会重新加载搜索过滤器，并在屏幕上产生闪烁效果。

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

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

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

Answer 1

您可以使用ajax.reload（）

table.ajax.reload();

或

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

Answer 2

您可以使用Datatables API rows().remove()或clear()删除，然后使用rows.add()添加所需的行，基本上就是ajax.reload（）所做的，仅用于所有行。

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

虽然上述API仅在内部清除/删除数据，但该操作在调用draw（）方法进行更新之前，将无法直观显示显示器。此方法可以简单地称为链接方法。

Datatables API draw()具有一（1）个参数，用于确定将执行哪种绘制数据表：

完全重置或真（默认）

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。

完全保留或否

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 或较新的。以前的版本仅支持boolean选项。

您可以使用 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>

如何在不使用destroy（）的情况下重新初始化Datatable

2 个答案: