I have the following jQuery dataTable:

$("#my-datatable").dataTable( {
    "bProcessing" : true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false,
    "sAjaxSource" : "/myServer/getAllWidgets",
    "sAjaxDataProp" : "",
    "bDestroy" : true,
    "fnServerData" : function(sSource, aoData, fnCallback) {
        aoData.push({
            "name" : "widgetName",
            "value" : wName
        });

        request = $.ajax({
            "dataType" : "json",
            "type" : "GET",
            "url" : sSource,
            "data" : aoData,
            "success" : fnCallback
        });
    },

    "aoColumns" : [
        {
            "mDataProp" : "widgetType"
        },
        {
            "mDataProp" : "widgetValue"
        },
        {
            "mDataProp" : "widgetFactor"
        }
    ]
});

This successfully hits my web server at /myServer/getAllWidgets and populates a 3-column dataTable (column headers are: Type, Value and Factor) on my UI. So far so good.

The problem is, the widgets MySQL table backing this dataTable changes frequently, and I would like to add a button to my UI such that when the user clicks the button, the dataTable is refreshed, meaning that /myServer/getAllWidgets runs again and displays the correct records/values to the user.

I've tried getting it to work for the past day, and everything I'm trying fails. Personally, I don't care how I get this "refresh" functionality, and don't care if the solution doesn't even involve fnReloadAjax at all (which is what I've been trying to get to work). I just need something that works:

<div id="refresh-button-div">
    <input type="button" id="refreshButton" onclick="refreshData"/>
</div>

// In JS
$("#refreshButton").click(function() {
    // ???
});

Thanks in advance.

I have the following jQuery dataTable:

$("#my-datatable").dataTable( {
    "bProcessing" : true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false,
    "sAjaxSource" : "/myServer/getAllWidgets",
    "sAjaxDataProp" : "",
    "bDestroy" : true,
    "fnServerData" : function(sSource, aoData, fnCallback) {
        aoData.push({
            "name" : "widgetName",
            "value" : wName
        });

        request = $.ajax({
            "dataType" : "json",
            "type" : "GET",
            "url" : sSource,
            "data" : aoData,
            "success" : fnCallback
        });
    },

    "aoColumns" : [
        {
            "mDataProp" : "widgetType"
        },
        {
            "mDataProp" : "widgetValue"
        },
        {
            "mDataProp" : "widgetFactor"
        }
    ]
});

This successfully hits my web server at /myServer/getAllWidgets and populates a 3-column dataTable (column headers are: Type, Value and Factor) on my UI. So far so good.

The problem is, the widgets MySQL table backing this dataTable changes frequently, and I would like to add a button to my UI such that when the user clicks the button, the dataTable is refreshed, meaning that /myServer/getAllWidgets runs again and displays the correct records/values to the user.

I've tried getting it to work for the past day, and everything I'm trying fails. Personally, I don't care how I get this "refresh" functionality, and don't care if the solution doesn't even involve fnReloadAjax at all (which is what I've been trying to get to work). I just need something that works:

<div id="refresh-button-div">
    <input type="button" id="refreshButton" onclick="refreshData"/>
</div>

// In JS
$("#refreshButton").click(function() {
    // ???
});

Thanks in advance.

• javascript
• jquery
• datatables

2 Answers 2

You can use the fnDraw function to redraw the table. Try this:

var $dataTable = $("#my-datatable").dataTable({ /* setup */ });

$("#refreshButton").click(function() {
    $dataTable.fnDraw();
});

Have a read of the fnDraw entry in the documentation.

I use the fnReloadAjax(); to reload table data from its ajax source

$("#refreshButton").click(function() {
    oTable.fnReloadAjax();
});

just change

$("#my-datatable").dataTable( {...

into

oTable = $("#my-datatable").dataTable( {...//make oTable a global var in your js

You can take this datatables plugin source from here fnReloadAjax , drop it in some js file and include it in your page...