如何重新加载/刷新 jQuery 数据表？答案

【问题标题】：How to reload/refresh jQuery dataTable?如何重新加载/刷新 jQuery 数据表？
【发布时间】：2012-10-07 16:49:02
【问题描述】：

我正在尝试实现单击屏幕上的按钮将导致我的jQuery dataTable 刷新的功能（因为自创建数据表以来服务器端数据源可能已更改）。

这是我所拥有的：

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

但是当我运行它时，它什么也没做。单击按钮时刷新数据表的正确方法是什么？提前致谢！

【问题讨论】：

您是否遇到任何 Javascript 错误？检查 Firebug / Chrome Inspector，也许添加更多代码（即表格和按钮代码）
datatables.net/reference/api/ajax.reload()

标签： javascript jquery datatables

【解决方案1】：

使用 1.10.0 版本的 DataTables，它是内置且简单的：

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

或者只是

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

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

【讨论】：

小心使用$('#example').DataTable()而不是$('#example').dataTable()。
执行此操作后，我无法访问数据表的内容。然后它说我只有 2 个 TR（一个带有标题，一个只有 1 个单元格显示没有数据）。我必须先重绘它吗？
Jon Koeter：没有看到你的代码就不可能回答你的问题。请与您的代码一起作为新问题发布，以便重现问题。
保留分页信息使用。 table.ajax.reload(null,false)，这里官方文档中提到过datatables.net/reference/api/ajax.reload()
这除了给我错误Cannot set property 'data' of null之外什么也没做

【解决方案2】：

先销毁数据表，再绘制数据表。

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

【讨论】：

为什么事情会这么复杂？
谢谢。这是这里唯一有效的答案。

【解决方案3】：

您可以尝试以下方法：

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

【讨论】：

这太棒了！但我发现你正在调用_fnAddData，它应该只是一个私有函数。这有风险吗？假设将来函数签名可能会改变。

【解决方案4】：

您可以使用 DataTable 的扩展 API 通过 ajax.reload() 重新加载它

如果您将数据表声明为DataTable()（新版本），您需要：

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

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

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

【讨论】：

【解决方案5】：

我遇到了同样的问题，我就是这样解决的：

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

var refreshedDataFromTheServer = getDataFromServer();

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

这里是来源： https://datatables.net/reference/api/clear()

【讨论】：

终于有一个非 ajax 答案了！
那是 fnServerData:getDataFromServer 吗？
使用简单的 JS 对象作为数据对我有用的唯一答案。谢谢！

【解决方案6】：

我建议使用以下代码。

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>

详情请见Here

【讨论】：

正确的。对于刷新表后不更改页码
等于table.ajax.reload();
是的，它确实等于上述内容，但您没有抓住重点。 table.ajax.reload();将刷新并重置表格，如果您在第 5 页上并且您刷新它。它会带你回到第一页。

【解决方案7】：

这个简单的答案对我有用

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

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

【讨论】：

【解决方案8】：

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

如果您想在 DataTables 1.10 中添加 重新加载/刷新按钮，请使用 drawCallback。

见下面的例子（我使用 DataTables 和 bootstrap css）

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

【讨论】：

【解决方案9】：

当你想刷新你的数据表时，使用这个代码：

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

这就是我的做法......也许不是最好的方法，但它绝对更简单（恕我直言）并且不需要任何额外的插件。

HTML

<div id="my-datatable"></div>

jQuery

function LoadData() {
    var myDataTable = $("#my-datatable").html("<table><thead></thead><tbody></tbody></table>");
    $("table",myDataTable).dataTable({...});
}
$(document).ready(function() {
    $("#my-button").click(LoadData);
    LoadData();
});

注意：在我使用 jQuery dataTable 的过程中，有时如果你没有 <thead></thead><tbody></tbody> 它就不起作用。但是没有它你也许能过得去。我还没有完全弄清楚是什么使它需要，什么不需要。

【讨论】：

【解决方案12】：

如果你使用 url 属性，就这样做

table.ajax.reload()

希望对某人有所帮助

【讨论】：

【解决方案13】：

好吧，您没有显示加载脚本的方式/位置，但要使用插件 API 函数，您必须在加载 DataTables 库之后但在初始化 DataTable 之前将其包含在您的页面中。

喜欢这个

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnReloadAjax.js"></script>

【讨论】：

【解决方案14】：

var myTable = $('#tblIdName').DataTable(); myTable.clear().rows.add(myTable.data).draw();

这在不使用 ajax 的情况下对我有用。

【讨论】：

【解决方案15】：

Allan Jardine 的 DataTables 是一个非常强大且流畅的 jQuery 插件用于显示表格数据。它有很多功能，可以做大部分你可能想要什么。不过，奇怪的是，有一件事是如何以简单的方式刷新内容，所以我自己参考，也可能为了其他人的利益，这里有一个如果这样做的一种方式的完整示例：

HTML

<table id="HelpdeskOverview">
  <thead>
    <tr>
      <th>Ärende</th>
      <th>Rapporterad</th>
      <th>Syst/Utr/Appl</th>
      <th>Prio</th>
      <th>Rubrik</th>
      <th>Status</th>
      <th>Ägare</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Javascript

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

function AutoReload()
{
  RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

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

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

Source

【讨论】：

【解决方案16】：

        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++){
            //

.......}

【讨论】：

【解决方案17】：

根据DataTable 的帮助，我可以为我的桌子做了。

我想要多个数据库到我的 DataTable。

例如：data_1.json > 2500 条记录 - data_2.json > 300 条记录 - data_3.json > 10265 条记录

var table;
var isTableCreated= false;

if (isTableCreated==true) {
    table.destroy();
    $('#Table').empty(); // empty in case the columns change
}
else
    i++;

table = $('#Table').DataTable({
        "processing": true,
        "serverSide": true,
        "ordering": false,
        "searching": false,
        "ajax": {
            "url": 'url',
            "type": "POST",
            "draw": 1,
            "data": function (data) {
                data.pageNumber = (data.start / data.length);
            },
            "dataFilter": function (data) {
                return JSON.stringify(data);
            },
            "dataSrc": function (data) {
                if (data.length > 0) {
                    data.recordsTotal = data[0].result_count;
                    data.recordsFiltered = data[0].result_count;
                    return data;
                }
                else
                    return "";
            },

            "error": function (xhr, error, thrown) {
                alert(thrown.message)
            }
        },
        columns: [
           { data: 'column_1' },
           { data: 'column_2' },
           { data: 'column_3' },
           { data: 'column_4' },
           { data: 'column_5' }
        ]
    });

【讨论】：

【解决方案18】：

如果使用数据表 v1.10.12，那么只需调用 .draw() 方法并传递您所需的绘图类型，即 full-reset、page，那么您将使用新数据重新绘制您的 dt

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

//做一些动作

dt.draw('full-reset')

更多请查看数据表文档

【讨论】：

【解决方案19】：

我已经做了一些与此相关的事情...下面是一个示例 javascript，其中包含您需要的内容。这里有一个演示：http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

//global the manage member table 
var manageMemberTable;

function updateMember(id = null) {
    if(id) {
        // click on update button
        $("#updatebutton").unbind('click').bind('click', function() {
            $.ajax({
                url: 'webdesign_action/update.php',
                type: 'post',
                data: {member_id : id},
                dataType: 'json',
                success:function(response) {
                    if(response.success == true) {                      
                        $(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table

                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');

                    } else {
                        $(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table                        
                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');
                    }
                }
            });
        }); // click remove btn
    } else {
        alert('Error: Refresh the page again');
    }
}

【讨论】：

【解决方案20】：

你必须在做更新操作后写这行代码。

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

【讨论】：

【解决方案21】：

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


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

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

Datatables clear(): Simply remove all rows of data from the table

【讨论】：

【解决方案22】：

很简单的答案

$("#table_name").DataTable().ajax.reload(null, false);

【讨论】：

【解决方案23】：

我的表先调用：

var myTable = $('.myTable').DataTable({
    "language": {
        "url": "//cdn.datatables.net/plug-ins/1.11.0/i18n/es_es.json"
    },
    dom: 'Bfrtip',
    processing: true,
    "paging": false
});

您的 ajax 调用代码在这里。

那么在ajax结果之后：

//Destroy my table
myTable.destroy();

//Place my table again
$("#tableWrapper").html(''+
    '<table class="table-striped myTable">'+
        '<thead>'+
            '<tr>'+
                '<th>Title</th>'+
            '</tr>'+
        '</thead>'+
        '<tbody id="info_conds">'+
            '<td>Content</td>'+
        '</tbody>'+
    '</table>'+
'');

再次调用我的表格属性

myTable = $('.myTable').DataTable({
    "language": {
        "url": "//cdn.datatables.net/plug-ins/1.11.0/i18n/es_es.json"
    },
    dom: 'Bfrtip',
    processing: true,
    "paging": false
});

完成。

【讨论】：

【解决方案24】：

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

    setInterval('autoRefresh()', 5000);

【讨论】：

【解决方案25】：

使用 init 重新初始化数据表并将检索写入 true ..done..so simple

例如。

TableAjax.init();
retrieve: true,

【讨论】：