Loading JSON from external AJAX call into DataTable

Madhu12

I am using DataTables 1.9.4 with jQuery 1.8.1.

I have created a table which has zero records on page load. On click of a button I am fetching data in the form of JSON using an external AJAX call. I need to load this JSON into the already existing data table.

I read through the examples and older discussions which suggests the usage of "sAjaxSource" option and "fnReloadAjax" function to load the data into data table. To my understanding it works only if make use of DataTable's built in AJAX feature.

How to load the externally fetched JSON into an existing data table.

Thanks!

Madhu12

I tried invoking the DataTable from inside the success block of AJAX call and assigned the JSON response to aaData.

[code]
$.ajax({
url: localhost:9081/MyProject/MyServlet,
type: "post",
data: {
param1: "paramValue1",
param2: "paramValue2"
},
success: function(response, textStatus, jqXHR){
oTable = $("#data-table-id").dataTable({
bJQueryUI: true,
bPaginate: true,
sPaginationType: "full_numbers",
bFilter: false,
bInfo: false,
aoColumnDefs: [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "bSortable": false, "aTargets": [ 4 ] }
],
bProcessing: true,
bServerSide: true,
aaData : [response],
aoColumns: [
{ "mData": "checkbox" },
{ "mData": "col2" },
{ "mData": "col3" },
{ "mData": "col4" },
{ "mData": "col5" }
]
});
},
error: function(jqXHR, textStatus, errorThrown){
// error handling should come here
},
complete: function(){
// to be implemented
}
});
[/code]

But this doesn't work. But if I hardcode this very same response into aaData (like in the example www.datatables.net/release-datatables/examples/ajax/objects.html ) it works. I am not sure what I am missing.

With the above code I am getting the error message - "DataTables warning (table id = 'data-table-id'): Requested unknown parameter 'checkbox' from the data source for row 0"

allan

> How to load the externally fetched JSON into an existing data table.

If you look at the fnReloadAjax plug-in, you'd see all it basically does is call fnClearTable and fnAddData to empty the current data dot hen load new data that has be obtained by Ajax. I'd suggest you might want to do it that way.

Allan

Madhu12

Thanks for the suggestion Allan. I will try this.

Madhu

Madhu12

Thanks Allan! This worked fine :)

[code]
var newDataToBeLoaded = eval('(' + json.aaData + ')');
oTable.fnClearTable();
oTable.fnAddData(newDataToBeLoaded);
[/code]

where "aaData" is a key in the JSON string coming from server.

bidon2

People that use eval because they are trying to decode json do not understand what json is.

http://en.wikipedia.org/wiki/JSON

Not sure what the content of json is here, but looks like you have a json string returned inside your json object. You should NOT be using eval. If you have json inside json then you should fix your server side code so that you don't. Then simply access the object using:

[code]
var newDataToBeLoaded = json.aaData;
[/code]