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

Question

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

这就是我所拥有的:

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

但是当我运行它时,它什么也没做.单击按钮时刷新dataTable的正确方法是什么？提前致谢!

Answer 1

对于DataTables的1.10.0版本,它内置且简单:

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

要不就

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

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

Answer 2

您可以尝试以下方法:

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

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

Answer 3

您可以使用扩展的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();

Answer 4

我有同样的问题,这是我如何解决它:

首先使用您选择的方法获取数据,我在提交将对表进行更改的结果后使用ajax.然后清除并添加新数据:

var refreshedDataFromTheServer = getDataFromServer();

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

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

Answer 5

首先销毁数据表,然后绘制数据表.

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

Answer 6

这个简单的答案对我有用

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

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

Answer 7

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

如果要向DataTables 1.10 添加重新加载/刷新按钮,请使用drawCallback.

请参阅下面的示例(我正在使用带引导程序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();
}

Answer 8

我建议使用以下代码。

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>

有关此细节，请参见此处

Answer 9

当您要刷新数据表时，请使用此代码：

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