我正在尝试实现这样的功能：点击屏幕上的按钮会导致我的jQuery dataTable刷新（因为自创建dataTable以来，服务器端数据源可能已经发生了更改）。
以下是我的代码：
$(document).ready(function() {
$("#my-button").click(function() {
$("#my-datatable").dataTable().fnReloadAjax();
});
});
但是当我运行它时，什么也没有发生。在单击按钮时刷新dataTable的正确方法是什么？
table.ajax.reload()
<div id="my-datatable"></div>
function LoadData() {
var myDataTable = $("#my-datatable").html("<table><thead></thead><tbody></tbody></table>");
$("table",myDataTable).dataTable({...});
}
$(document).ready(function() {
$("#my-button").click(LoadData);
LoadData();
});
<thead></thead><tbody></tbody>，它就不能正常工作。但是你也许可以不使用它而得以工作。我还没有完全弄清楚什么情况下它是必需的，什么情况下不是。好的，你没有展示你是如何/在哪里加载脚本的，但是要使用插件API函数，你必须在加载DataTables库之后但在初始化DataTable之前将其包含在页面中。
像这样：
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnReloadAjax.js"></script>
var myTable = $('#tblIdName').DataTable();
myTable.clear().rows.add(myTable.data).draw();
在执行更新操作后，您需要编写这行代码。
$('#example').DataTable().ajax.reload();
<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>
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);
});
非常简单的答案
$("#table_name").DataTable().ajax.reload(null, false);
根据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' }
]
});
我的表格首次调用：
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
});
完成。
我曾经做过与此相关的事情... 下面是一个包含你需要内容的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');
}
}