how can I trigger jquery datatables fnServerData to update a table via AJAX when I click a button?

From a discussion here, Allan (the DataTables guy) suggests that simply calling fnDraw will yield the results you're looking for. This is the method I use for reloading server-side stuff (via fnServerData, which is important), and it's worked so far.

$("#userFilter").on("change", function() {    oTable.fnDraw();  // In your case this would be 'tblOrders.fnDraw();'});

I found this script some time ago (so I don't remember where it came from :( and who to credit for it :'( ) but here :

$.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);}

Add that BEFORE you call the datatable initialization function. then you can just call the reload like this:

$("#userFilter").on("change", function () {        oTable.fnReloadAjax(); // In your case this would be 'tblOrders.fnReloadAjax();'    });

userFilter is an ID for a dropdown, so when it changes, it reloads the data for the table. I just added this as an example but you can trigger it on any event.

All the solutions mentioned before have some problem (for example, the additional user http paramaters are not posted or are stale). So I came up with following solution that works well.

Extension function (My params are array of key value pairs)

<pre>$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, myParams ) {if ( oSettings.oFeatures.bServerSide ) {    oSettings.aoServerParams = [];    oSettings.aoServerParams.push({"sName": "user",        "fn": function (aoData) {            for (var i=0;i<myParams.length;i++){            aoData.push( {"name" : myParams[i][0], "value" : myParams[i][1]});         }     }});     this.fnClearTable(oSettings);     this.fnDraw();     return;    }};</pre>

Example usage to put in you refresh event listener.

<pre>oTable.fnReloadAjax(oTable.oSettings, supplier, val);</pre>

Just one thing to pay attention to. Do not redraw table, once it's created, beacuse it's time consuming. Therefore, be sure to draw it only the first time. Otherwise, reload it

<pre>var oTable;if (oTable == null) {    oTable = $(".items").dataTable(/* your inti stuff here */); {}else{    oTable.fnReloadAjax(oTable.oSettings, supplier, val);}</pre>