How to reload the datatable(jquery) data?
Solution 1
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.
Solution 2
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 after your delete function has succeded.
Source: http://www.meadow.se/wordpress/?p=536
Solution 3
Use the fnReloadAjax() by the DataTables.net author.
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();
Solution 4
Simpler solution:
var dt = $('#table_scroll').dataTable();
$.getJSON(url, null, function (json) {
dt.fnClearTable();
dt.fnAddData(json.aaData);
dt.fnDraw();
});
Solution 5
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.
Related videos on Youtube
gur
Updated on December 15, 2020Comments
-
gur over 3 years
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.
(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...
(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...
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() ]); } });
-
Adam F over 12 yearshave you ever heard of for(var i in json.aaData)
-
Rui Marques almost 12 yearsfnReloadAjax() worked perfectly. I didn't find this solution anywhere. It keeps all active filter and sorting. Just perfect.
-
Sydwell almost 11 yearsGreat solution no need for FN... fnReloadAjax!
-
Snekse almost 11 yearsWhat is this needed for?
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
-
Josh about 10 yearsDoesn't work for me; it makes the back-end call and gets the data but doesn't recreate the table itself. :(
-
Josh about 10 yearsThis is the only solution that worked for me (sort of).
-
Eman about 10 yearsdude, you are a major life saver! this works perfectly for me. +100
-
dma_k almost 10 yearsIn principle similar logic was added to DataTable v1.10.1 as
ajax.reload()
. -
Vyacheslav over 8 yearsThe most elegant solution. Thanks.