如何重新加载/刷新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); });
使用DataTable的1.10.0版本，它是内置的和简单的：
var table = $('#example').DataTable(); table.ajax.reload();
要不就
$('#example').DataTable().ajax.reload();
你可以使用一个广泛的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();
如果你想添加一个重载/刷新button到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(); }
销毁数据表并绘制数据表。
$('#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-reset ， page然后您将重新绘制新的数据
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">×</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">×</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,
