如何重新加载/刷新jQuery dataTable？

Question

如何重新加载/刷新jQuery dataTable？

117

我正在尝试实现这样的功能：点击屏幕上的按钮会导致我的jQuery dataTable刷新（因为自创建dataTable以来，服务器端数据源可能已经发生了更改）。

以下是我的代码：

$(document).ready(function() {
    $("#my-button").click(function() {
        $("#my-datatable").dataTable().fnReloadAjax();
    });
});

但是当我运行它时，什么也没有发生。在单击按钮时刷新dataTable的正确方法是什么？

- IAmYourFaja

你是否遇到了任何Javascript错误？请使用Firebug / Chrome Inspector进行检查，或者可能需要添加一些更多的代码（例如表格和按钮代码）。 - Geert

3

ajax.reload() 是一个 DataTables 插件的 API 方法，用于重新加载表格数据并更新页面显示。 - zx1986

我的解决方案是：没有使用Ajax: https://dev59.com/QF8e5IYBdhLWcg3wPYlA#72723432 - Matheus Santz

26个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user4022380 · Answer 1

if(data.length==0){
    alert("empty");
      $('#MembershipTable > tbody').empty();
    // $('#MembershipTable').dataTable().fnDestroy();
            $('#MembershipTable_info').empty(); 
            $("#MembershipTable_length").empty();
            $("#MembershipTable_paginate").empty();

     html="<tr><td colspan='20'><b>No data available in Table</b> </td></tr>";
   $("#MembershipTable").append(html);
}

else{
     $('#MembershipTable').dataTable().fnDestroy();
    $('#MembershipTable > tbody').empty();

 for(var i=0; i<data.length; i++){
    //
.......}

- Jimmy Obonyo Abor · Answer 2

如果使用datatable v1.10.12，则只需调用.draw()方法并传递所需的绘制类型，例如full-reset、page，然后您将使用新数据重新绘制dt。

let dt = $("#my-datatable").datatable()

// 执行一些操作

dt.draw('full-reset')

更多信息请查看Datatable文档

- AbdurrahmanY · Answer 3

对于我的情况（DataTables 1.10.7），以下代码适用于我：


let table = $(tableName).DataTable();
table.clear().draw();

$(tableName).dataTable({ ... });

Datatables clear(): 从表格中简单地删除所有数据行

- answerSeeker · Answer 4

这是解决该问题的方法：

const myTable= $('#mytable');
myTable.DataTable({
  **bDestroy: true**
}
);

- user8108068 · Answer 5

function autoRefresh(){
    table.ajax.reload(null,false); 
    alert('Refresh');//for test, uncomment
}

setInterval('autoRefresh()', 5000);

- Viral rana · Answer 6

使用 init 参数重新初始化数据表，并将 retrieve 参数设置为 true..完成..如此简单

例如：

TableAjax.init();
retrieve: true,