datatable（jquery）データをリロードする方法は？
選択したタブをリロードする方法は？実際、部品のリロードに問題があります。データを追加すると、データテーブルに正常に保存されますが、データベースのIDフィールドには適切なIDが表示されますが、詳細を追加するとデータテーブルにIDが表示されません。
（要約タブを更新する前に）ここに、データテーブルIDの患者の夫の年齢.................のように表示されている例があります... '' xyz abc 23 ....... soオン...
（手動で更新した後）しかし、ページを更新すると、データテーブルに次のように表示されます：id patient husband age ........... so on ... 13 xyz abc 23 ..... ..など...
ただし、詳細を追加すると、選択したタブが自動的に更新されるはずです。
私のコードは次のとおりです。
<button type="button" a href="javascript:void(0);" onclick="fnClickAddRow();">Add Summary</button>
function fnClickAddRow(event) {
$('#table_scroll').dataTable().fnAddData( [
$('#patientt').val(),$('#husband').val(),$('#age').val(),$('#opu_no').val(),$('#date').val(),$('#proc').val(),$('#no_of_eggs').val(),$('#fert').val(),$('#et_date').val(),$('#et_day').val(),$('#et').val(),$('#fz').val(),$('#bioch_preg').val(),$('#clin_preg').val(),$('#fh').val(),$('#comment').val()
]);
var datastring = $(Form_summary).serialize();
$.ajax({
type: "POST",
url: "summaryajax.php",
data: datastring,
success: function(response){
alert(response);
}
});
私もこのアプローチに疲れましたが、成功しませんでした。
データテーブルでデータを更新したい
function fnClickAddRow(event) {
var datastring = $(Form_summary).serialize();
$.ajax({
type: "POST",
url: "summaryajax.php",
data: datastring,
success: function(response){
$('#table_scroll').dataTable().fnAddData(
[resposne, $('#patientt').val(), $('#husband').val(),$('#age').val(),
$('#opu_no').val(), $('#date').val(),$('#proc').val(), $('#no_of_eggs').val(),
$('#fert').val(),$('#et_date').val(), $('#et_day').val(), $('#et').val(),
$('#fz').val(), $('#bioch_preg').val(), $('#clin_preg').val(), $('#fh').val(),
$('#comment').val() ]);
}
});
あなたは簡単なアプローチを使用することができます...
$('YourDataTableID').dataTable()._fnAjaxUpdate();
同じパラメーターでajaxリクエストを行うことにより、データを更新します。とても簡単です。
この関数を使用できます：
function RefreshTable(tableId, urlData)
{
//Retrieve the new data with $.getJSON. You could use it ajax too
$.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();
});
}
呼び出すことを忘れないでくださいafter削除機能が成功しました。
DataTables.net作成者が fnReloadAjax（） を使用します。
私は以下のソースコードをコピーしています-オリジナルが動く場合に備えて：
$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( typeof sNewSource != 'undefined' && sNewSource != null )
{
oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;
var aData = [];
this.oApi._fnServerParams( oSettings, aData );
oSettings.fnServerData( oSettings.sAjaxSource, aData, function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable( oSettings );
/* Got the data - add it to the table */
var aData = (oSettings.sAjaxDataProp !== "") ?
that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;
for ( var i=0 ; i<aData.length ; i++ )
{
that.oApi._fnAddData( oSettings, aData[i] );
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
that.fnDraw();
if ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true )
{
oSettings._iDisplayStart = iStart;
that.fnDraw( false );
}
that.oApi._fnProcessingDisplay( oSettings, false );
/* Callback user function - for event handlers etc */
if ( typeof fnCallback == 'function' && fnCallback != null )
{
fnCallback( oSettings );
}
}, oSettings );
}
/* Example call to load a new file */
oTable.fnReloadAjax( 'media/examples_support/json_source2.txt' );
/* Example call to reload from original file */
oTable.fnReloadAjax();
よりシンプルなソリューション：
var dt = $('#table_scroll').dataTable();
$.getJSON(url, null, function (json) {
dt.fnClearTable();
dt.fnAddData(json.aaData);
dt.fnDraw();
});
何かうまくいったら！これを行う：
例：
<div id="tabledisplay"><table class="display" id="table"></table><table </div>
テーブルをリロードする方法：
$('#tabledisplay').empty();
$('#tabledisplay').append("<table class=\"display\" id=\"table\"></table>");
initTable( "tablename");
initTableは、getJSONでテーブルを初期化した単なるメソッドです。
これらの解決策はどれも私にとってはうまくいきませんでしたが、Masoodの答えに似たようなことをしました。ここは後世のためです。これは、ページ内に_<table id="mytable"></table>_があることを前提としています。
_function generate_support_user_table() {
$('#mytable').hide();
$('#mytable').dataTable({
...
"bDestroy": true,
"fnInitComplete": function () { $('#support_user_table').show(); },
...
});
}
_重要な部分は次のとおりです。
bDestroy。ロード前に現在のテーブルを消去します。hide()呼び出しとfnInitCompleteにより、すべてがロードされた後にのみテーブルが表示されます。それ以外の場合は、読み込み中にサイズが変更され、奇妙に見えます。
関数呼び出しを$(document).ready()に追加するだけで、すべて設定できます。最初にテーブルをロードし、ボタンのクリックなどで後からリロードします。
// Get the url from the Settings of the table: oSettings.sAjaxSource
function refreshTable(oTable) {
table = oTable.dataTable();
oSettings = table.fnSettings();
//Retrieve the new data with $.getJSON. You could use it ajax too
$.getJSON(oSettings.sAjaxSource, null, function( json ) {
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();
});
}
誰かがそれを必要とする場合に備えて、これを投稿しています。
ボタンを作成するだけです：
<button type="button" href="javascript:void(0);" onclick="mytable.fnDraw();">Refresh</button>
しかし、データテーブルを呼び出すときにこれを追加することを忘れないでください：
mytable = $("#mytable").dataTable();
Ajaxデータソースからテーブルデータをリロードするには、次の関数を使用します。
_dataTable.ajax.reload()
_ここで、dataTableはテーブルの作成に使用される変数です。
_var dataTable = $('#your_table_id').DataTable({
ajax: "URL"
});
_詳細については、 ajax.reload() を参照してください。
新しいバージョンの場合：
var datatable = $('#table').dataTable().api();
$.get('myUrl', function(newDataArray) {
datatable.clear();
datatable.rows.add(newDataArray);
datatable.draw();
});