如何重新加载/刷新jQuery数据表?

我试图实现的function,点击屏幕上的button将导致我的jQuery数据表刷新(因为服务器端数据源可能已经改变,因为dataTable创build)。

这是我有:

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

但是当我运行这个时,它什么都不做。 单击button时刷新数据表的正确方法是什么? 提前致谢!

您可以尝试以下方法:

 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

使用DataTable的1.10.0版本,它是内置的和简单的:

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

要不就

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

http://datatables.net/reference/api/ajax.reload(&#xFF09;

你可以使用一个广泛的DataTable API来通过ajax.reload()重新加载它

如果你声明你的DataTable()DataTable() (新版本),你需要:

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

如果你将dataTable()声明为dataTable() (旧版本),你需要:

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

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

首先得到您select的方法的数据,我提交的结果后,会使表更改的Ajax。 然后清除并添加新的数据:

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

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

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

如果你想添加一个重载/刷新buttonDataTables 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(); } 

销毁数据表并绘制数据表。

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

这个简单的答案为我工作

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

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

这是我如何做…也许不是最好的方式,但它绝对简单(恕我直言),并不需要任何额外的插件。

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数据表的工作中,有时候如果你没有<thead></thead><tbody></tbody>那么这是行不通的。 但是你也许能够没有它。 我还没有弄清楚什么是需要的,什么不需要。

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

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

那么您并没有显示如何/在哪里加载脚本,而是使用插件API函数,您必须在加载DataTables库之后但在初始化DataTable之前将其包含在页面中。

喜欢这个

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

Allan Jardine的DataTables是一个非常强大而又漂亮的jQuery插件,用于显示表格数据。 它有许多function,可以做你想要的大部分。 有一件很奇怪的事情就是如何以简单的方式刷新内容,所以我为了自己的参考,也可能为了别人的利益,下面是一个完整的例子:

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

资源

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

…….}

根据DataTable的帮助,我可以做我的表。

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

例如:data_1.json> 2500logging – data_2.json> 300logging – data_3.json> 10265logging

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

如果使用datatable v1.10.12,那么只需调用.draw()方法并传递所需的绘图types,即full-resetpage然后您将重新绘制新的数据

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

//做一些动作

dt.draw('full-reset')

为更多检查数据表文件

我做了一些涉及到这一点…下面是一个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'); } } 
  function autoRefresh(){ table.ajax.reload(null,false); alert('Refresh');//for test, uncomment } setInterval('autoRefresh()', 5000); 

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

 table.ajax.reload() 

希望它可以帮助别人

使用init重新初始化数据表,并将其检索为true ..done..so简单

例如。

 TableAjax.init(); retrieve: true,