DataTables

My code is below. I am trying to load data into a datatable. This should be straightforward and should work out of the box, but doesn't. The examples are unclear on how to load data. I have loaded data serverside with the grid, and then just called datatable() with code similar to that below. But, I do Not want to do it serverside. It should be entirely possible to do it all in jquery. when I trace through the code, the data in the variable forecastDetails exists and is NOt null. I've been trying to set different variables like "sAjaxSource": forecastDetails, "aaData": forecastDetails, "fnServerData": forecastDetails, but nothing works at all. Also, the data is from a pivot table (with variable number of columns) but the data exists, so the grid should not be blank. I put fixed column headers as it complains if I don't. So, can you please post some code to help me out?

Thanks!






function loadSummaryForecastDetails(resourcePlanId) {
var serviceUrl = "http://<%=Request.Url.Authority%>"; + "/Services/SystemLevelForecastService.asmx/GetSystemForecastDetails?rpid=" + resourcePlanId;
$.get(serviceUrl, function (data) {
loadForecastDetailsGrid(data);
}, "json");
}

function loadForecastDetailsGrid(forecastDetails) {

if (forecastDetails != null) {
alert("Forecast details loaded data!");

var oTable = $('#tblForecastDetails').dataTable(

{
//"sAjaxSource": forecastDetails,
// "aaData": forecastDetails,

"fnServerData": forecastDetails,
"aoColumns": [
{ "sTitle": "Type", width: "2000px" },
{ "sTitle": "2012" },
{ "sTitle": "2013" },
{ "sTitle": "2014" },
{ "sTitle": "2015", "sClass": "center" }

],
"iDisplayLength": 5,
"aLengthMenu": [[5], [5]],
"bJQueryUI": true,
// "sPaginationType": "full_numbers",
// "sDom": 'T<"clear">lfrtip',
"oLanguage": {
"sSearch": "Search table:"
}
// ,
// "zTop": -1
});


// new FixedHeader(oTable);
}
}