Using a Json object to create an Html table using Datatables

robertmazzo

I'm trying to use the "aaData" property to provide a Json object to my Html table as in this live example:

[code]http://www.datatables.net/release-datatables/examples/data_sources/js_array.html [/code]

however, I'm having trouble when I manually create the Json object in javascript (i.e. but it works if I provide a text file with Json data).

My current steps are as follows :

1) use jQuery ajax call to get my XML data from an asp.net mvc controller :

[code]
$.ajax({ // GET PORTFOLIOS FROM SERVER !!
url: "/Portfolios/getPortfolios",
type: "GET",
dataType: "xml",
async: true,
success: parsePortfolios,
});
[/code]

2) On success, call the parsePortfolios js function and add to Json object in memory then render Datatable ...


FOR EXAMPLE:

[code]
var PfJsonData = { "aaData": [] }; // INIT JSON OBJECT !!
function parsePortfolios(xml) {
var termColWidth = 12;
$(xml).find("portfolioSummary").each(function () { // parse nodes and create Html Table !!
var pfId = $(this).attr('portfolioId');
var exp = [];
var myRow = "";
var name = "";
var expType = "HS Var";
name = $.trim($(this).attr('displayValue'));

$(this).find("exposureProfile node").each(function () { // gets "exposureProfile/node" nodes
var term = $(this).find('tag').text();
var exposure = parseFloat($(this).find('exposure').text()).toLocaleString();
var dateArry = $(this).attr('date').split("-");
var nodeDate = dateArry[1] + "/" + dateArry[2] + "/" + dateArry[0];

// ATTEMPT TO CREATE JSON DATA OF PORTFOLIOS !!
PfJsonData.aaData.push({
"PfId": pfId,
"Name": name,
"ExpType": expType,
"Date": nodeDate,
"Term": term,
"Exposure": exposure
})

});
});

[code]
var oTable = $('#pftable').dataTable({
"aaData": [PfJsonData], // JSON OBJECT HERE !!
"sScrollY": "500px",
"aoColumns":[
{ "mData": "PfId" },
{ "mData": "Name" },
{ "mData": "ExpType" },
{ "mData": "Date" },
{ "mData": "Term" },
{ "mData": "Exposure" }
],
'aoColumnDefs': [
{ "sTitle": "Pf Id", "aTargets": [0] },
{ "sTitle": "Name", "aTargets": [1] },
{ "sTitle": "Exp Type", "aTargets": [2] },
{ "sTitle": "Date", "aTargets": [3] },
{ "sTitle": "Term", "aTargets": [4] },
{ "sTitle": "Exposure", "aTargets": [5] },
{ "sClass": "td_pfid", "aTargets": [0] },
{ "sClass": "td_nodedate", "aTargets": [0] },
]
});
[/code]


Can someone please tell me where I'm going wrong ? I have Json object PfJsonData created ahead of time but can't seem to assign it to the "aaData" parameter...

thank you.

Bob

robertmazzo

I FIGURED IT OUT JUST NOW !!!
Reply if interested...

rewen

Hi there,

What was the trick?

robertmazzo

Turned out to be an incorrect usage of the "aaData" property. Quite simple, actually, but I lack the javascript/json experience to figure things out quickly...

The correct usage with Json variable is as follows :

[code]
function parsePortfolios(xml) {
var PfJsonData = [];
... init more vars here

// CREATE JSON DATA OF PORTFOLIOS !!
PfJsonData.push({
"PfId": pfId,
"Name": name,
"ExpType": expType,
"Date": nodeDate,
"Term": term,
"Exposure": exposure
});
oTablePf = $('#pftable').dataTable({
"aaData": PfJsonData,
"aoColumns":[
{ "mData": "PfId" },
{ "mData": "Name", },
{ "mData": "ExpType" },
{ "mData": "Date" },
{ "mData": "Term" },
{ "mData": "Exposure" }
]
});
[/code]