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

Question

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

以下是我的代码：

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

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

- IAmYourFaja

---

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

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

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

Answer 1

使用DataTables的1.10.0版本及以上，这已经内置且非常容易实现：

var table = $('#example').DataTable();
table.ajax.reload();

或者只是

$('#example').DataTable().ajax.reload();

http://datatables.net/reference/api/ajax.reload()

- atmelino

---

请注意使用 $('#example').DataTable() 而不是 $('#example').dataTable()。 - Sergiu

我执行完这个操作后就无法访问数据表的内容了。它显示只有两个TR（一个是标题，另一个只有一个单元格，显示没有数据）。我需要先重新绘制它吗？ - Jon Koeter

Jon Koeter：没有看到你的代码，无法回答你的问题。请发布一个新问题，并附上你的代码，以便能够重现这个问题。 - atmelino

为了保留分页信息，请使用table.ajax.reload(null,false)。官方文档在此处提到：https://datatables.net/reference/api/ajax.reload()。 - Srinivas Rathikrindi

这什么也没做，只是给我一个错误提示：“无法设置空值的属性'data'”。 - Cerin

Answer 2

首先要销毁原有的数据表格，然后再绘制新的数据表格。

$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();

- Sareesh Krishnan

---

为什么事情要这么复杂？ - Akmal

谢谢。这是这里唯一有效的答案。 - Cerin

Answer 3

您可以使用DataTable的广泛API通过 ajax.reload() 进行重载。

如果您将datatable声明为DataTable()（新版本），则需要：

var oTable = $('#filtertable_data').DataTable( );
// to reload
oTable.ajax.reload();

如果您将您的数据表声明为dataTable()（旧版本），那么您需要：

var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();

- Sruit A.Suk

Answer 4

您可以尝试以下方法：

function InitOverviewDataTable() {
    oOverviewTable = $('#HelpdeskOverview').dataTable({
        "bPaginate": true,
        "bJQueryUI": true, // ThemeRoller-stöd
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": true,
        "bProcessing": true,
        "iDisplayLength": 10,
        "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
    });
}

function RefreshTable(tableId, urlData) {
    $.getJSON(urlData, null, function(json) {
        table = $(tableId).dataTable();
        oSettings = table.fnSettings();

        table.fnClearTable(this);

        for (var i = 0; i < json.aaData.length; i++) {
            table.oApi._fnAddData(oSettings, json.aaData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        table.fnDraw();
    });
}
// Edited by Prasad
function AutoReload() {
    RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

    setTimeout(function() {
        AutoReload();
    }, 30000);
}

$(document).ready(function() {
    InitOverviewDataTable();
    setTimeout(function() {
        AutoReload();
    }, 30000);
});

http://www.meadow.se/wordpress/?p=536

- Xavier

---

这很棒！但我发现你正在调用 _fnAddData，这个函数应该只是私有的。这样做是否有风险？比如说，将来函数签名可能会改变。 - Roy Ling

Answer 5

我曾经遇到过同样的问题，以下是我的解决方法：

首先，使用您选择的方法获取数据，我在提交结果后使用了ajax。然后清除并添加新的数据：

var refreshedDataFromTheServer = getDataFromServer();

var myTable = $('#tableId').DataTable();
myTable.clear().rows.add(refreshedDataFromTheServer).draw();

这是源代码： https://datatables.net/reference/api/clear()

- Mosd

---

终于有一个非 Ajax 的回答了！ - Fabio Venturi Pastor

那是 fnServerData:getDataFromServer 吗？ - DEREK LEE

使用一个简单的JS对象作为数据的唯一答案对我起作用。谢谢！ - Banzy

如果有人想要为行使用HTML标记，可以使用以下代码myTable.clear().rows.add($('<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>')).draw();。参考：https://datatables.net/forums/discussion/47742/some-way-to-add-html-row - Jignesh Gohel

Answer 6

这个简单的答案对我有用

                  $('#my-datatable').DataTable().ajax.reload();

参考 https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event

- Stephen Ngethe

Answer 7

我建议使用以下代码。

table.ajax.reload(null, false); 

这是因为用户分页在重新加载页面时不会被重置。

示例：

<button id='refresh'> Refresh </button>

<script>
    $(document).ready(function() {

        table = $("#my-datatable").DataTable();
        $("#refresh").on("click", function () { 
         table.ajax.reload(null, false); 
        });

   });
</script>

详细信息可以在此处找到。

- Ad Kahn

---

正确的做法是，在刷新表格后不更改页面编号。 - Manthan Patel

等同于 table.ajax.reload(); - CodeToLife

是的，它确实等同于上面的代码，但你没有抓住重点。table.ajax.reload();将刷新和重置表格，如果你在第5页并刷新它，它会带你回到第一页。 - Ad Kahn

Answer 8

var ref = $('#example').DataTable();
ref.ajax.reload();

如果你想要在DataTables 1.10中添加一个重新加载/刷新的按钮，则可以使用drawCallback。请见下面的示例（我正在使用带有Bootstrap CSS的DataTables）。

var ref= $('#hldy_tbl').DataTable({
        "responsive": true,
        "processing":true,
        "serverSide":true,
        "ajax":{
            "url":"get_hotels.php",
            "type":"POST"
        },
        "drawCallback": function( settings ) {
            $('<li><a onclick="refresh_tab()" class="fa fa-refresh"></a></li>').prependTo('div.dataTables_paginate ul.pagination');
        }
    });

function refresh_tab(){
    ref.ajax.reload();
}

- Vibin TV

Answer 9

当您想要刷新数据表格时，请使用以下代码：

 $("#my-button").click(function() {
    $('#my-datatable').DataTable().clear().draw();
 });

- AdagioDev

Answer 10

尝试先销毁数据表，然后重新设置，例如：

var table;
$(document).ready(function() {
    table = $("#my-datatable").datatable()
    $("#my-button").click(function() {
        table.fnDestroy();
        table = $("#my-datatable").dataTable();
    });
});

- Nick Hoàng