jQuery dataTableをリロード/更新する方法
画面上のボタンをクリックすると、（--- dataTableが作成されてからサーバー側のデータソースが変更された可能性があるため） jQuery dataTable が更新される機能を実装しようとしています。
これは私が持っているものです：
$(document).ready(function() {
$("#my-button").click(function() {
$("#my-datatable").dataTable().fnReloadAjax();
});
});
しかし、これを実行しても何もしません。ボタンがクリックされたときにdataTableを更新するための適切な方法は何ですか？前もって感謝します！
あなたは以下を試すことができます：
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);
});
DataTablesのバージョン1.10.0では、組み込みで簡単です。
var table = $('#example').DataTable();
table.ajax.reload();
あるいは単に
$('#example').DataTable().ajax.reload();
ajax.reload()によってそれをリロードするためにDataTableの広範なAPIを使うことができます
あなたのデータテーブルをDataTable()（new version）として宣言するならば、あなたは必要とします：
var oTable = $('#filtertable_data').DataTable( );
// to reload
oTable.ajax.reload();
データテーブルをdataTable()（旧バージョン）として宣言した場合は、次のものが必要です。
var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();
私は同じ問題を抱えていた、これは私がそれをどのように修正したかです：
最初にあなたが選んだ方法でデータを取得し、私はテーブルに変更を加える結果を提出した後にajaxを使います。次に、新しいデータを消去して追加します。
var refreshedDataFromTheServer = getDataFromServer();
var myTable = $('#tableId').DataTable();
myTable.clear().rows.add(refreshedDataFromTheServer).draw();
ここにソースがあります： https://datatables.net/reference/api/clear（）
まずデータテーブルを破棄してからデータテーブルを描画します。
$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();
var ref = $('#example').DataTable();
ref.ajax.reload();
DataTables 1.10にリロード/更新ボタンを追加したい場合は、drawCallbackを使用してください。
下記の例を参照してください（私は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-datatable').DataTable().ajax.reload();
ref https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event
最初にdatatableを破棄してから設定し直してください。
var table;
$(document).ready(function() {
table = $("#my-datatable").datatable()
$("#my-button").click(function() {
table.fnDestroy();
table = $("#my-datatable").dataTable();
});
});
これが私のやり方です...おそらく最善の方法ではないかもしれませんが、それは間違いなく（私見）簡単で、追加のプラグインを必要としません。
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のdataTableを使った作業では、<thead></thead><tbody></tbody>がないとうまく動作しないことがあります。しかし、あなたはそれなしで通り抜けることができるかもしれません。何がそれを必要とし、何がそうしないのか、正確にはわかっていません。
次のコードを使うことをお勧めします。
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>
これについての詳細は こちら で見つけることができます
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>
Allan JardineのDataTablesは、表形式のデータを表示するための非常に強力で滑らかなjQueryプラグインです。それは多くの機能を持っていて、あなたが望むかもしれないことの大部分をすることができます。不思議なことに難しいのは、内容を簡単な方法で更新する方法です。そのため、私は自分の参考のため、そしておそらく他の人のためにも、これを行う場合の1つの方法の完全な例を示します。
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);
});
データテーブルを更新したい場合は、このコードを使用してください。
$("#my-button").click(function() {
$('#my-datatable').DataTable().clear().draw();
});
私はこれに関連する何かをしました...以下はあなたが必要とするものが付いているサンプル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');
}
}
var myTable = $（ '＃tblIdName'）。DataTable（）; myTable.clear（）。rows.add（myTable.data）.draw（）;
これは私のためにajaxを使わなくてもうまくいきました。
更新操作を行った後にこのコード行を書く必要があります。
$('#example').DataTable().ajax.reload();
datatable v1.10.12を使用していて、.draw()メソッドを呼び出して必要な描画タイプ、すなわちfull-reset、pageを渡すと、新しいデータでdtを再描画します。
let dt = $("#my-datatable").datatable()
//何らかのアクションをとる
dt.draw('full-reset')
データテーブルをもっとチェックするには
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' }
]
});