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

ajax, datatables, javascript, jquery, triggers

Solution

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.

Problem

I'm using the datatables plugin with server-side data and am updating the table using AJAX. My dataTables setup looks like this: ``` tblOrders = parameters.table.dataTable( { "sDom": '<"S"f>t<"E"lp>', "sAjaxSource": "../file.cfc", "bServerSide": true, "sPaginationType": "full_numbers", "bPaginate": true, "bRetrieve": true, "bLengthChange": false, "bAutoWidth": false, "aaSorting": [[ 10, "desc" ]], "aoColumns": [ ... columns ], "fnInitComplete": function(oSettings, json) { // trying to listen for updates $(window).on('repaint_orders', function(){ $('.tbl_orders').fnServerData( sSource, aoData, fnCallback, oSettings ); }); }, "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) { var page = $(oSettings.nTable).closest('div:jqmData(wrapper="true")') aoData.push( { "name": "returnformat", "value": "plain"}, { "name": "s_status", "value": page.find('input[name="s_status"]').val() }, { "name": "s_bestellnr", "value": page.find('input[name="s_bestellnr"]').val() }, { "name": "form_submitted", "value": "dynaTable" } ); $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData , "success": fnCallback }); } ``` I have some custom fields for filtering the data server-side, which i'm pushing along with the AJAX request. The problem is, I don't know how to trigger a JSON request from outside of the table. If the user types into the filter, fnServerData fires and updates the table. However, if the user picks a control outside of the table, I have no idea how to trigger the fnServerData function. Right now I'm trying with a custom event I'm firing and listening to in fnInitComplete. While I can detect the user picking a custom filtering criteria, I'm missing all parameters needed for fnServerData to trigger correctly. Question: Is there a way to trigger fnServerData from a button outside of the actual dataTables table? I guess I could try to add a space to the filter, but this is not really an option. Thanks for input! Question

Original source