Using fnReloadAjax Still not working - ajax

Question

Using Datatables, and the fnReloadAjax plugin (see below), I am trying to reload the table's data from a server-side script using the following code:
$.fn.dataTableExt.oApi.fnReloadAjax = function(oSettings, sNewSource, fnCallback, bStandingRedraw) {
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);
};
$(document).ready(function() {
$('#reloadDataBtn').click(function() {
$('#myTable').fnReloadAjax('mySource2.php');
});
$("#myTable").dataTable({ bSort: true,
"bProcessing": true,
"sAjaxSource": 'mySource1.php',
bAutoWidth: true,
"iDisplayLength": 5, "aLengthMenu": [5, 10, 25, 50, 100],
"sPaginationType": "full_numbers",
"aoColumnDefs": [{ "bSortable": false, "aTargets": [-1, 0]}]
});
});
But I still get the fnReloadAjax is not a function JS error. What am I doing wrong?

Answer 1

In verstion 1.10 of DataTable plugin, function fnReloadAjax is deprecated, now you need use api().ajax.reload() instead:
$(document).ready(function() {
var datatable = $('#calls_list_table').dataTable({
"iDisplayLength": 10,
"processing": true,
"serverSide": true,
"ajax": {
"url": "/calls/data/",
"type": "POST"
}
});
$('button').click(function() {
// use it instead of fnReloadAjax
datatable.api().ajax.reload();
});
});

Answer 2

This is because you address an element returned by jQuery, not the dataTable object itself.
Do this instead :
var dataTable; //reference to your dataTable
$('#reloadDataBtn').click(function() {
dataTable.fnReloadAjax('mySource2.php');
//NOT
//$('#myTable').fnReloadAjax('mySource2.php');
});
dataTable = $("#myTable").dataTable({
bSort: true,
"bProcessing": true,
"sAjaxSource": 'mySource1.php',
bAutoWidth: true,
"iDisplayLength": 5, "aLengthMenu": [5, 10, 25, 50, 100],
"sPaginationType": "full_numbers",
"aoColumnDefs": [{ "bSortable": false, "aTargets": [-1, 0]}]
});
Now fnReloadAjax() will be called proplerly.