如何重新加载数据表（jquery）数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5566541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reload the datatable(jquery) data?
提问by gur
How to reload the selected tab? Actually I have problem with reloading part. When I add my data I'll successfully saved in datatable but in id field in database it shows proper id, but when I add the detail its not shows id in datatable.
如何重新加载选定的选项卡？实际上我在重新加载部分时遇到了问题。当我添加我的数据时，我将成功保存在数据表中，但在数据库的 id 字段中，它显示了正确的 id，但是当我添加详细信息时，它没有在数据表中显示 id。
(before refresh the summary tab) here is example it shows something like this in datatable id patient husband age ...........so on... '' xyz abc 23....... so on...
（在刷新摘要选项卡之前）这里是一个例子，它在数据表 id 患者丈夫年龄中显示了类似的内容.............等等......'' xyz abc 23....... 所以在...
(after refreshing manually) but when I refresh my page it show successfully..like this in datatable: id patient husband age ...........so on... 13 xyz abc 23 ....... so on...
（手动刷新后）但是当我刷新我的页面时它成功显示..在数据表中是这样的：id耐心丈夫年龄.............等等...... 13 xyz abc 23 ..... .. 很快...
But exactly I want when I add my detail it should automatically refresh the selected tab.
但正是我想要的，当我添加我的细节时，它应该自动刷新选定的选项卡。
My code is below:
我的代码如下：
<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);
}
});
I also tired this approach but no success.
我也厌倦了这种方法，但没有成功。
I want my datatable to refresh the data
我希望我的数据表刷新数据
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() ]);
}
});
回答by Elior Cohen
You can use a simple approach...
您可以使用一种简单的方法...
$('YourDataTableID').dataTable()._fnAjaxUpdate();
It will refresh the data by making an ajax request with the same parameters. Very simple.
它将通过使用相同参数发出 ajax 请求来刷新数据。很简单。
回答by Edgar Villegas Alvarado
You could use this function:
你可以使用这个功能：
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();
});
}
Dont' forget to call it afteryour delete function has succeded.
不要忘记在删除函数成功后调用它。
回答by Alexander Farber
Use the fnReloadAjax()by the DataTables.net author.
使用DataTables.net 作者的 fnReloadAjax()。
I'm copying the source code below - in case the original ever moves:
我正在复制下面的源代码 - 以防原始代码移动：
$.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();
回答by Onur Y?ld?r?m
Simpler solution:
更简单的解决方案：
var dt = $('#table_scroll').dataTable();
$.getJSON(url, null, function (json) {
dt.fnClearTable();
dt.fnAddData(json.aaData);
dt.fnDraw();
});
回答by Masood Moshref
If anything works! Do this:
如果有什么工作！做这个：
example:
例子：
<div id="tabledisplay"><table class="display" id="table"></table><table </div>
how to reload the table:
如何重新加载表：
$('#tabledisplay').empty();
$('#tabledisplay').append("<table class=\"display\" id=\"table\"></table>");
initTable( "tablename");
initTable is just a method, that initialized the Table with getJSON.
initTable 只是一种方法，它使用 getJSON 初始化表。
回答by Josh
None of these solutions worked for me, but I did do something similar to Masood's answer. Here it is for posterity. This assumes you have <table id="mytable"></table>in your page somewhere:
这些解决方案都不适合我，但我确实做了一些类似于 Masood 的回答。这是为了后代。这假设您<table id="mytable"></table>在页面中的某个地方有：
function generate_support_user_table() {
$('#mytable').hide();
$('#mytable').dataTable({
...
"bDestroy": true,
"fnInitComplete": function () { $('#support_user_table').show(); },
...
});
}
The important parts are:
重要的部分是：
bDestroy, which wipes out the current table before loading.- The
hide()call andfnInitComplete, which ensures that the table only appears after everything is loaded. Otherwise it resizes and looks weird while loading.
bDestroy，它会在加载之前清除当前表。- 该
hide()呼叫和fnInitComplete，从而确保所有加载后的表才会出现。否则它会在加载时调整大小并看起来很奇怪。
Just add the function call to $(document).ready()and you should be all set. It will load the table initially, as well as reload later on a button click or whatever.
只需将函数调用添加到$(document).ready()，您就应该准备就绪。它最初会加载表格，稍后会在单击按钮或其他任何东西时重新加载。
回答by Martin
// 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();
});
}
回答by iguider
I'm posting this just in case someone need it..
我张贴这个以防万一有人需要它..
Just create a button:
只需创建一个按钮：
<button type="button" href="javascript:void(0);" onclick="mytable.fnDraw();">Refresh</button>
but don't forget to add this when calling the datatable:
但不要忘记在调用数据表时添加：
mytable = $("#mytable").dataTable();
回答by Pablo Palladino
To reload the table data from Ajax data source, use the following function:
要从 Ajax 数据源重新加载表数据，请使用以下函数：
dataTable.ajax.reload()
Where dataTableis the variable used to create the table.
dataTable用于创建表的变量在哪里。
var dataTable = $('#your_table_id').DataTable({
ajax: "URL"
});
See ajax.reload()for more information.
有关ajax.reload()更多信息，请参阅。
回答by ChrisE
For the newer versions use:
对于较新的版本，请使用：
var datatable = $('#table').dataTable().api();
$.get('myUrl', function(newDataArray) {
datatable.clear();
datatable.rows.add(newDataArray);
datatable.draw();
});
Taken from: https://stackoverflow.com/a/27781459/4059810
