如何重新加载数据表(jquery)数据?
Posted
技术标签:
【中文标题】如何重新加载数据表(jquery)数据?【英文标题】:How to reload the datatable(jquery) data? 【发布时间】:2011-07-30 19:22:47 【问题描述】:如何重新加载选定的标签?实际上我有重新加载部分的问题。当我添加我的数据时,我会成功保存在数据表中,但在数据库的 id 字段中它会显示正确的 id,但是当我添加详细信息时,它不会在数据表中显示 id。
(在刷新摘要选项卡之前)这是一个示例,它在数据表 id 患者丈夫年龄............'' xyz abc 23...... ..等等...
(手动刷新后)但是当我刷新我的页面时它显示成功..像这样在数据表中:id 患者丈夫年龄............ 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() ]);
);
【问题讨论】:
【参考方案1】:您可以使用简单的方法...
$('YourDataTableID').dataTable()._fnAjaxUpdate();
它将通过使用相同参数发出 ajax 请求来刷新数据。很简单。
【讨论】:
为我工作!谢谢。 对我不起作用;它进行后端调用并获取数据,但不会重新创建表本身。 :( 老兄,你是一个重要的救生员!这对我来说非常有效。 +100【参考方案2】:你可以使用这个功能:
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();
);
不要忘记在您的删除功能成功后调用它。
来源:http://www.meadow.se/wordpress/?p=536
【讨论】:
无需 FN 的绝佳解决方案... fnReloadAjax!【参考方案3】:使用 DataTables.net 作者的the 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();
【讨论】:
fnReloadAjax() 运行良好。我在任何地方都没有找到这个解决方案。它保留所有活动的过滤器和排序。简直完美。 这是一个很好的方法。效果很好,但在我看来 Elior Cohen 的答案更好。结果是一样的,但它不需要任何额外的代码,只需要一个简单的数据表方法调用。去 $('YourDataTableID').dataTable()._fnAjaxUpdate(); 原则上,DataTable v1.10.1 中添加了类似的逻辑ajax.reload()
。【参考方案4】:
更简单的解决方案:
var dt = $('#table_scroll').dataTable();
$.getJSON(url, null, function (json)
dt.fnClearTable();
dt.fnAddData(json.aaData);
dt.fnDraw();
);
【讨论】:
最优雅的解决方案。谢谢。 最优雅的解决方案。谢谢。【参考方案5】:如果一切正常!这样做:
示例:
<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 初始化 Table。
【讨论】:
这是唯一对我有用的解决方案(有点)。【参考方案6】:这些解决方案都不适合我,但我确实做了类似于 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()
,您就应该一切就绪。它最初会加载表格,然后在单击按钮或其他任何方式时重新加载。
【讨论】:
【参考方案7】:// 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();
);
【讨论】:
你听说过for(var i in json.aaData) 这需要什么?oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
【参考方案8】:
我发布这个以防有人需要它..
只需创建一个按钮:
<button type="button" href="javascript:void(0);" onclick="mytable.fnDraw();">Refresh</button>
但不要忘记在调用数据表时添加这个:
mytable = $("#mytable").dataTable();
【讨论】:
如果dataTable
已经被初始化,它将不起作用。在这种情况下它会抛出异常。【参考方案9】:
要从 Ajax 数据源重新加载表数据,请使用以下函数:
dataTable.ajax.reload()
其中dataTable
是用于创建表的变量。
var dataTable = $('#your_table_id').DataTable(
ajax: "URL"
);
更多信息请参见ajax.reload()
。
【讨论】:
【参考方案10】:对于较新的版本,请使用:
var datatable = $('#table').dataTable().api();
$.get('myUrl', function(newDataArray)
datatable.clear();
datatable.rows.add(newDataArray);
datatable.draw();
);
取自:https://***.com/a/27781459/4059810
【讨论】:
以上是关于如何重新加载数据表(jquery)数据?的主要内容,如果未能解决你的问题,请参考以下文章
将新数据附加到窗口时如何重新加载 jQuery 插件。没有提供 reload() 方法