fnReloadAjax

sifuhall

On my site there is an event that updates the info in the underlying tables and after that even I want to refresh my tables.

After searching I see that fnReloadAjax appears to be what I want, but I'm not sure how to use it.

Can someone please post an example using fnReloadAjax to refresh an existing datatable on an event other than .ready (like in a button click or something)?

allan

I'm not aware of any examples being directly available at the moment, however it should just be a case of something like this:

[code]
var oTable;
$(document).ready( function () {
oTable = $('#example).dataTable();

$('#click_me').click( function () {
oTable.fnReloadAjax();
} );
} );
[/code]

This will reload the table whenever the element with the id 'click_me' is click upon.

Allan

sifuhall

Thank you very much!

One last question.

How would I call fnReloadAjax from another javascript function?

allan

Hi sifuhall,

The call above is actually being done from a function - it's just an anonymous function in typical jQuery stylee...

Something more common might be like this:

function my_func () {
oTable.fnReloadAjax();
}

Allan

sifuhall

That's very similar to what I am using, but not sure where I am going wrong.

In my ready statement I have:

$('#styles').dataTable( {
"bStateSave": true,
"bProcessing": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"aoColumns": [
{ "sClass": "stylename" },
{ "sClass": "center", "sTitle": "Level" },
{ "sClass": "center", "bVisible": false },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" }
],
"sAjaxSource": '/ajax.php?action=get_styles'
} );


And the table is initialized and looks great.

In another javascript function (not in the ready event) I have:

function isUpdated() {
document.getElementById("outputstyle").innerHTML = 'Updated';
var oTable;
oTable = $('#styles').dataTable();
oTable.fnReloadAjax();
}



And when this is executed i get:

Error: oTable.fnReloadAjax is not a function

allan

The problem is in your declaration of the oTable variable. Have a look at some of the examples ( http://datatables.net/examples/example_add_row.html etc ) and you will see that oTable should be a global variable and the result of you DataTables initialisation should be assigned to it.

Regards,
Allan

sifuhall

I apologize for being so dense and I really appreciate your help, Allan.

I'm not sure what I'm doing wrong with this.

Here is my code:

[code]

var oTable;

$(document).ready(function() {

oTable = $('#styles').dataTable( {
"bStateSave": true,
"bProcessing": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"aoColumns": [
{ "sClass": "stylename" },
{ "sClass": "center", "sTitle": "Level" },
{ "sClass": "center", "bVisible": false },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" }
],
"sAjaxSource": '/ajax.php?action=get_styles&id=121'
} );
} );

function test() {
oTable.fnReloadAjax();
}

[/code]

When I click on a button that fires test() I get:
oTable.fnReloadAjax is not a function.

* Edited by Allan to add syntax highlighting. Use [ code ] and [ /code ] (without the spaces)

allan

Okay - that should work (as long as fire() is called after your page has loaded). So the next question is where have you defined fnReloadAjax(). This is a plug-in function so needs to be declared before you use this code snippet you have above, but after the DataTables.js script tag.

You can see the following for how plug-ins might be applied (although this is sorting and type detection, the same principle applies): http://datatables.net/examples/example_sorting_plugin.html

Allan

sifuhall

Thank you very much for your replies.

I'm sorry, but I do not think I understand.

I reviewed the example you provided but am not sure what must be done.

To accomplish this I will need to create my own function named fnReloadAjax and in that function I must add the javascript to delete all rows?

Again, sorry for being so dense on this.

sifuhall

My apologies again.

After reading and re-reading each of the examples it finally became clear to me and is now working.

Thank you so much for all the help!!!

stevenmc

Ok, so to answer the original question, here is a start to finish implementation of the fnReloadAjax function using a JSON data source.

[code]

<?PHP
include("includes/dbconnect.php");
include("includes/functions.php");
?>

@import "cssTable/demo_page.css";
@import "cssTable/demo_table.css";


<!-- Only needed when a form that needs validated is used -->
<!-- Only needed when a table that needs sorted is included -->

function addContact(){
//add contact code goes here... (forum wouldn't allow me to post the full length code)
}

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback ){
if ( typeof sNewSource != 'undefined' ){
oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;

oSettings.fnServerData( oSettings.sAjaxSource, null, function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable( oSettings );

/* Got the data - add it to the table */
for ( var i=0 ; i

LeeNguyen

I'm new to using DataTables, so my question may seem naive.

But why do we have to define our own fnRefreshAjax function? I would have assumed that since DataTable advertises an Ajax feature that can be used to refresh data, the fnRefreshAjax would be part of the core library instead of being an extension?

allan

fnReloadAjax is a plug-in for DataTables ( http://datatables.net/plug-ins/api#fnReloadAjax ) which can be readily customised (as shown in this thread :-) ) to suit whatever use is needed.

The reason that it's not included in the standard DataTables library, is that by far the majority of users of DataTables would not use this function - hence it would just be dead weight most of the time. As such, it's an optional add on (as with all the other plug-ins, of which there is no shortage these days :-) ) that you can use if you have the need.

Regards,
Allan

jnorris

Hi Allen,

I've tried various versions of the fnReloadAjax function that I have found in forum posts but I have not been able to get any of them to work. For example using the version above from stevemc's post, when fnServerData is invoked on initialization an alert with "aoData=" + aoData gives "aoData=" and everything works fine. Then when the fnReloadAjax function is called the alert in fnServerData is "aoData=null", which causes a webpage error (Error: 'null' is null or not an object) when trying to push data into it from user selections.

It seems to me that it is a pretty common use case to simply refresh the page by reloading data using the original ajax source settings. For example a page with various search filters that are pushed into aoData for the function call allows the user to refine the data displayed in the table without having to reload the entire page. I can get the refresh to work with server-side processing but I need to have all rows on the page for processing prior to doing some DB updates.

Any ideas how I can get rid of the null issue to try to get fnAjaxReload to work?

Thanks,
Jim

jnorris

Hi Allan,

Disregard the last post. I now see that I totally misunderstood the customization of the fnReloadAjax function and it's obvious why aodata is null since it is being set to null in the above version of the function.

Regards,
Jim

noego

I tried to implement this plugin in my project but to my disappointment I found out that the ajax request this function generates doesn't include any datatable parameters (limit, pagination, sortable columns etc.) so I had to alter the code to get this functionality to work. Here is the code, I hope somebody finds it helpful.

[code]
$.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;

this.fnDraw();
}

[/code]

thebrowser

Isn't there an error line 24 in stevenmc's code? l24: that.fnDraw( that );

fnDraw() expects a boolean as parameter, not an instance of the DataTable object. This same line appears here: http://datatables.net/plug-ins/api#fnReloadAjax

Regards,

allan

Good catch - I'd agree. That should be a boolean value... Otherwise its undefined behaviour :-)

Allan

medSwa

hi, when i use fnReloadAjax the control is going to server side but its not sending all datatable parameters in the request. so all datatable params like sEcho are not recieved. can you tell me what can be the case.
my table initialisation looks like this:

queueTable = $('#pendDataTable').dataTable( {

"sPaginationType": "full_numbers",
"bServerSide": true,
"bProcessing": true,
"aoColumns": [ null, null, null, null, null, null, {"sType": "currency"}, { "sType": "currency"} , {fnRender:fnCreateSelect},{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false }],

"bJQueryUI": true,
"sAjaxSource": "/eor/pend"

} );

fbas

allan can correct me if I'm wrong, but I think fnReloadAjax is to reload a static AJAX source.

for server side processing, call fnDraw (refresh the whole table) or fnUpdate (refresh a cell or row) to re-query your server side script

thebrowser

@fbas: I use both server-side and client-side and what you say is correct.

Does someone has a modification to fnReloadAjax() to allow for the reload to maintain the pagination, filtering and sorting?

allan

@fbas: Exactly correct.

@thebrowser: I thought there was one knocking around somewhere, but I can't see it at the moment. It's basically a combination of the fnStandingRedraw and fnReloadAjax plug-in that you are looking for (i.e. save paging location before the redraw). Sorting and filtering should already be maintained.

Allan

thebrowser

Allan, I just had a look again back at the fnStandingRedraw and fnReloadAjax plugins. We definitely overlooked something here because the StandingRedraw functionnality is already provided by the fnReloadAjax plugin! As per the function prototype:
[code]$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )[/code]

Thus the following code does the trick:
[code]oTable.fnReloadAjax(null, null, true);[/code]

As a reminder, it would be good for new users of the fnReloadAjax plugin if you could update the plugin page and replace:
[code]
that.fnDraw( that );
by
that.fnDraw();
[/code]

allan

Hi thebrowser,

I had completely forgotten about the standing redraw option being added to fnReloadAjax! A useful option that :-).

And thanks for the reminder about the call to fnDraw - I've just modified the plug-in to do the correct thing.

Regards,
Allan

travep

I'm using struts and have other form data along with my tables. So I decided to convert my Collections of data to jSON on the back end and drop the resulting arrays into the page...and load my tables from them. However, I want to then reload the data in the tables upon user action via ajax. I didn't want to load from ajax initially as I didn't want to make several round trips initially. Maybe there's a better way. If not, how do I now reload the tables with an ajax call since they were not initially loaded via ajax...

[code]
jQuery(document).ready(function() {

jQuery('#dynamic').html( '' );
availTable = jQuery('#example').dataTable( {
"bPaginate": false,
"bFilter": false,
"bInfo": false,
"aaData": aDataSet,
"aoColumns": [
{ "mDataProp": "description", "sTitle": "Available Roles", "bSortable": false }
],
"oLanguage": { "sEmptyTable": emptyMsg }

} );

.........
[/code]

zizanationwide

When I click on the button to call fnReloadAjax function I get the processing busy ajax loading window, but it never makes an Ajax(JSON) request. (using firebug to check it)

These are my settings
var Otable = $("table.datatable2").dataTable2({
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "aaData.php",
"fnServerData": fnDataTablesPipeline
});
Otable.fnReloadAjax();

I am using the code listed on page http://datatables.net/plug-ins/api#fnReloadAjax
I have placed test alerts within the fnReloadAjax function and I noticed the code never makes it past the line of code 'this.oApi._fnServerParams( oSettings, aData );'
There is no javascript/console error message