Datatables Not Updating After Button Click

Question

I've finally thrown in the towel. I have looked through a heap of examples both on the Datetables website and here on stackoverflow for a solution and have implemented all of them without success.

I have a page that has 2 hjquery ui datepickers (start and end date) which I use to feed into my php and sql which then returns my json array that feeds into my datatables. This works brilliantly on first try.

However a typical user will want to change these dates throughout his stay on the website but when the user enteres new date variables and clicks the go button the datatable is not updating with the new information that it (hopefully) has received from the input.

here is the dump of my code (not on first load the page will retrieve todays data)

$.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() 
{
    $("#datestart").datepicker();
    $("#datestart").datepicker("setDate", new Date());
    $("#dateend").datepicker();
    $("#dateend").datepicker('setDate', new Date());
    oTable = $('#example').dataTable(
    {
        "sDom": '<"toolbar">T<"clear">rt',
        "oTableTools": {
                "sSwfPath": "copy_csv_xls_pdf.swf"
        },
        "bProcessing": true,
        "fnServerParams": function (aoData) {
                aoData.push({"name": "dateStart", "value": $('#datestart').datepicker('getDate').getTime()/1000+28800},{"name": "dateEnd", "value":  $('#dateend').datepicker('getDate').getTime()/1000+28800});
         },
         "sAjaxSource": "SearchResults.php",
         "iDisplayLength": -1,
         "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]     
    })              
        .columnFilter(
        {
            sPlaceHolder: "head:before",
            aoColumns: [
                { type:"date-euro" },
                { type: "number" },
                { type: "number" },
                { type: "number" },
                { type: "text"}
            ]
      });

  $('#btnrun').click(function() 
    {
         if(validateForm())
         {
          $.blockUI({ 
             css: { 
                  border: 'none', 
                  padding: '15px', 
                  backgroundColor: '#000', 
                  '-webkit-border-radius': '10px', 
                  '-moz-border-radius': '10px', 
                  opacity: .5, 
                  color: '#fff' 
                },
                   message: '<h1>Loading report...</h1>', 
            }); 
       setTimeout($.unblockUI, 2000); 
       oTable.fnReloadAjax();
     }
    }); 

 });

Andrew Burns · Accepted Answer · 2014-01-30 02:38:47Z

Sorry for those that have been investing time to investigate. I didn't realise that I hadn't pasted the entire fnReloadAjax(); function. So I went back to the datetables website and pasted the entire method:

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback,     bStandingRedraw )
{
// DataTables 1.10 compatibility - if 1.10 then versionCheck exists.
// 1.10s API has ajax reloading built in, so we use those abilities
// directly.
if ( $.fn.dataTable.versionCheck ) {
    var api = new $.fn.dataTable.Api( oSettings );

    if ( sNewSource ) {
        api.ajax.url( sNewSource ).load( fnCallback, !bStandingRedraw );
    }
    else {
        api.ajax.reload( fnCallback, !bStandingRedraw );
    }
    return;
}

if ( sNewSource !== undefined && sNewSource !== null ) {
    oSettings.sAjaxSource = sNewSource;
}

// Server-side processing should just call fnDraw
if ( oSettings.oFeatures.bServerSide ) {
    this.fnDraw();
    return;
}

this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;
var aData = [];

this.oApi._fnServerParams( oSettings, aData );

oSettings.fnServerData.call( oSettings.oInstance, 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 ( bStandingRedraw === true )
    {
        oSettings._iDisplayStart = iStart;
        that.oApi._fnCalculateEnd( oSettings );
        that.fnDraw( false );
    }

    that.oApi._fnProcessingDisplay( oSettings, false );

    /* Callback user function - for event handlers etc */
    if ( typeof fnCallback == 'function' && fnCallback !== null )
    {
        fnCallback( oSettings );
    }
}, oSettings );

};

Jay Rizzi · Accepted Answer · 2014-01-30 18:44:50Z

0

here on the datatables forum http://datatables.net/forums/discussion/comment/16380

To reload data when using server-side processing, just use the built-in API function fnDraw rather than this plug-in

so, remove the plug-in, and try using fnDraw, then if you still have issues we can sort that out

answered Jan 30, 2014 at 18:44

Jay Rizzi

4,3046 gold badges45 silver badges73 bronze badges

Collectives™ on Stack Overflow

Datatables Not Updating After Button Click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related