fnReloadAjax

fnReloadAjax

edited May 2009 in General Posts: 20
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)?

Replies

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

    var oTable; $(document).ready( function () { oTable = $('#example).dataTable(); $('#click_me').click( function () { oTable.fnReloadAjax(); } ); } );
    This will reload the table whenever the element with the id 'click_me' is click upon.

    Allan
  • Posts: 20
    Thank you very much!

    One last question.

    How would I call fnReloadAjax from another javascript function?
  • Posts: 22,717
    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
  • Posts: 20
    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
  • Posts: 22,717
    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
  • edited May 2009 Posts: 20
    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:

    <script> 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(); } </script>
    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)
  • Posts: 22,717
    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
  • Posts: 20
    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.
  • Posts: 20
    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!!!
  • edited May 2010 Posts: 3
    Ok, so to answer the original question, here is a start to finish implementation of the fnReloadAjax function using a JSON data source.

    <html> <head> <?PHP include("includes/dbconnect.php"); include("includes/functions.php"); ?> <style type="text/css" title="currentStyle"> @import "cssTable/demo_page.css"; @import "cssTable/demo_table.css"; </style> <script type="text/javascript" language="javascript" src="js/jquery.js"></script> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>; <!-- Only needed when a form that needs validated is used --> <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script> <!-- Only needed when a table that needs sorted is included --> <script> 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<json.aaData.length ; i++ ){ that.oApi._fnAddData( oSettings, json.aaData[i] ); } oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); that.fnDraw( that ); that.oApi._fnProcessingDisplay( oSettings, false ); /* Callback user function - for event handlers etc */ if ( typeof fnCallback == 'function' ){ fnCallback( oSettings ); } }); } var oTable; $(document).ready(function() { $("#addContact").validate(); oTable = $('#example').dataTable({ "bPaginate": true, "bLengthChange": false, "bFilter": true, "bSort": true, "bInfo": true, "bProcessing": true, "bServerSide": true, "sAjaxSource": "server_processing.php", "sPaginationType": "full_numbers", "sDom": '<"toolbar">frtip', //Allows the toolbar to be added beside the search bar "bAutoWidth": true }); $("div.toolbar").html('Search for any contact:'); $('#addContact').submit(function() { addContact(); e.preventDefault(); }); $('#click_me').click( function () { alert("test"); oTable.fnReloadAjax(); }); }); </script> </head> <body> <div id="click_me">click me</div> <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> <thead> <tr> <th>company_name</th> <th>contact_name</th> <th>telephone</th> <th>address_line_1</th> <th>address_line_2</th> <th>address_line_3</th> <th>city</th> <th>postcode</th> <th>email</th> <th>summary</th> </tr> </thead> <tbody> </tbody> </table> </body> </html>
  • 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?
  • Posts: 22,717
    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
  • Posts: 25
    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
  • Posts: 25
    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
  • edited May 2011 Posts: 1
    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.

    $.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(); }
  • 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,
  • Posts: 22,717
    Good catch - I'd agree. That should be a boolean value... Otherwise its undefined behaviour :-)

    Allan
  • Posts: 22
    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"

    } );
  • Posts: 1,083
    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
  • @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?
  • Posts: 22,717
    @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
  • 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:
    $.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
    Thus the following code does the trick:
    oTable.fnReloadAjax(null, null, true);
    As a reminder, it would be good for new users of the fnReloadAjax plugin if you could update the plugin page and replace:
    that.fnDraw( that ); by that.fnDraw();
  • Posts: 22,717
    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
  • Posts: 5
    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...

    jQuery(document).ready(function() { jQuery('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="oneColDisplay" id="example"></table>' ); availTable = jQuery('#example').dataTable( { "bPaginate": false, "bFilter": false, "bInfo": false, "aaData": aDataSet, "aoColumns": [ { "mDataProp": "description", "sTitle": "Available Roles", "bSortable": false } ], "oLanguage": { "sEmptyTable": emptyMsg } } ); .........
  • 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
This discussion has been closed.