[英]How to reload/refresh jQuery dataTable?
我正在嘗試實現功能,單擊屏幕上的按鈕將導致我的jQuery dataTable刷新(因為自創建 dataTable 以來服務器端數據源可能已更改)。
這是我所擁有的:
$(document).ready(function() {
$("#my-button").click(function() {
$("#my-datatable").dataTable().fnReloadAjax();
});
});
但是當我運行它時,它什么也不做。 單擊按鈕時刷新數據表的正確方法是什么?
使用 1.10.0 版的 DataTables,它是內置且簡單的:
var table = $('#example').DataTable();
table.ajax.reload();
要不就
$('#example').DataTable().ajax.reload();
先銷毀數據表,再繪制數據表。
$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();
您可以使用 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();
您可以嘗試以下方法:
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);
});
我有同樣的問題,這就是我解決它的方法:
首先使用您選擇的方法獲取數據,我在提交結果后使用 ajax 將對表格進行更改。 然后清除並添加新數據:
var refreshedDataFromTheServer = getDataFromServer();
var myTable = $('#tableId').DataTable();
myTable.clear().rows.add(refreshedDataFromTheServer).draw();
我建議使用以下代碼。
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>
可以在此處找到有關此的詳細信息
這個簡單的答案對我有用
$('#my-datatable').DataTable().ajax.reload();
參考https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event
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();
}
當您想刷新數據表時,請使用此代碼:
$("#my-button").click(function() {
$('#my-datatable').DataTable().clear().draw();
});
先嘗試銷毀數據表,然后重新設置,例如
var table;
$(document).ready(function() {
table = $("#my-datatable").datatable()
$("#my-button").click(function() {
table.fnDestroy();
table = $("#my-datatable").dataTable();
});
});
這就是我的做法......也許不是最好的方法,但它絕對更簡單(恕我直言)並且不需要任何額外的插件。
<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();
});
注意:在我使用 jQuery dataTable 的過程中,有時如果你沒有<thead></thead><tbody></tbody>
它就不起作用。 但是沒有它你也許能過得去。 我還沒有完全弄清楚是什么使它需要,什么不需要。
如果您使用 url 屬性,只需執行
table.ajax.reload()
好吧,您沒有顯示加載腳本的方式/位置,但是要使用插件 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();
這在不使用 ajax 的情況下對我有用。
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);
});
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幫助,我可以為我的表完成。
我想要多個數據庫到我的 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' }
]
});
如果使用 datatable v1.10.12 則只需調用.draw()
方法並傳遞您所需的繪制類型,即full-reset
, page
然后您將使用新數據重新繪制 dt
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');
}
}
您必須在執行更新操作后編寫這行代碼。
$('#example').DataTable().ajax.reload();
對於我的情況(DataTables 1.10.7),以下代碼適用於我;
let table = $(tableName).DataTable();
table.clear().draw();
$(tableName).dataTable({ ... });
非常簡單的答案
$("#table_name").DataTable().ajax.reload(null, false);
我的桌子第一次打電話:
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
});
完畢。
function autoRefresh(){
table.ajax.reload(null,false);
alert('Refresh');//for test, uncomment
}
setInterval('autoRefresh()', 5000);
使用 init 重新初始化數據表並將檢索寫入 true ..done..so simple
例如。
TableAjax.init();
retrieve: true,
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.