Advice or help with data tables

TroyL

I'm new to DataTables but I have been able to get the table populated using Json from a Web service.
My last row of data is as follows..
{"DT_RowId": "6","DT_RowClass": "totalCount","0": "TOTAL","1": "400525","2": "400525","3": "99","4": "400525","5": "99","6": "99","7": "99","8": "99","9": "99","10": "99"}
I'm doing the total processing on the server.. I would like to know how to get this row to show up in the footer? and not have it show up in the table?
Any help would be awesome thanks..
Troy

allan

You need to take it out of the aaData array and make it some other property - `footer` for example. Then use fnInitComplete to populate the footer with the JSON data that is passed in.

Allan

TroyL

Allan,
I have been able to add in this to my data feed
"FooterTotal": [ {"0": "400525","1": "400525","2": "99","3": "400525","4": "99","5": "99","6": "99","7": "99","8": "99","9": "99"}]

That is working great.. Thank you..
I have added fnInitComplete to my datatable but I don't get an alert can you show me what I'm doing wrong on this please...

$("#CpaReportingTable").dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": true,
"asStripClasses": null,
"bProcessing": true,
"bServerSide": true,
"bDestroy": true,
"sAjaxSource": "Services/DashboardReporting.asmx/GetCpaReport",
"bDeferRender": true,
"sScrollY": "300px",
"sDom": "rtS",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success": function (msg) {

var json = jQuery.parseJSON(msg.d);
fnCallback(json);
$("#CpaReportingTable").show();
},
"fnInitComplete": function (oSettings, json) {
alert('DataTables has finished its initialisation.');
}
});
}
});

TroyL

Allen, So I moved the fnInitComplete to the correct area that helps.. So I have it giving me a alert message now..
So now I'm trying to get this to display in a alert message.. "0": "400525" but now I get no alert message.

$("#CpaReportingTable").dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": true,
"asStripClasses": null,
"bProcessing": true,
"bServerSide": true,
"bDestroy": true,
"sAjaxSource": "Services/DashboardReporting.asmx/GetCpaReport",
"bDeferRender": true,
"sScrollY": "300px",
"sDom": "rtS",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success": function (msg) {

var json = jQuery.parseJSON(msg.d);
fnCallback(json);

$("#CpaReportingTable").show();
}
});
},
"fnInitComplete": function (oSettings, json) {
$.each(json, function () {
alert(this['0']);
});
}
});

TroyL

Allen,
I have been able to get the data out with it like this... Will this work..?

[code]
$("#CpaReportingTable").dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": true,
"asStripClasses": null,
"bProcessing": true,
"bServerSide": true,
"bDestroy": true,
"sAjaxSource": "Services/DashboardReporting.asmx/GetCpaReport",
"bDeferRender": true,
"sScrollY": "300px",
"sDom": "rtS",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success": function (msg) {

var json = jQuery.parseJSON(msg.d);
fnCallback(json);
$.each(json.FooterTotal, function () {
alert(this['2']);
});

$("#CpaReportingTable").show();
}
});
}
});
[/code]

TroyL

Allen,
I have been able to get the footer to load using this method.. I don't really like it.. it will slow things down over time. but it works for now.. I would really like to know how to use the Json data to do this instead.. Let me know if there is some way for me to get the json data into the footer.. I'm sure it's something simple but I can't seem to figure it out.. Thanks
Troy

[code]
$("#CpaReportingTable").dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": true,
"asStripClasses": null,
"bProcessing": true,
"bServerSide": true,
"bDestroy": true,
"sAjaxSource": "Services/DashboardReporting.asmx/GetCpaReport",
"bDeferRender": true,
"sScrollY": "300px",
"sDom": "rtS",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success": function (msg) {

var json = jQuery.parseJSON(msg.d);
fnCallback(json);
$("#CpaReportingTable").show();
}
});

},
"fnFooterCallback": function (nRow, aoData) {
var nCells = nRow.getElementsByTagName('th');
var iValidLeads = 0;
var iMedSuppPlansClosed = 0;
var iPercentOfValidMedSupp = 0;

for (var i = 0 ; i < aoData.length ; i++) {
iValidLeads += parseInt(aoData[i][1]);
iMedSuppPlansClosed += parseInt(aoData[i][2]);
iPercentOfValidMedSupp += parseInt(aoData[i][3]);
}

nCells[1].innerHTML = iValidLeads;
nCells[2].innerHTML = iMedSuppPlansClosed;
nCells[3].innerHTML = iPercentOfValidMedSupp;

}
});
[/code]

allan

You want to use fnInitComplete as I mentioned before. I see you did try it, but you not it didn't work. Can you please link me to a test page showing it not working so I can debug why that is and offer some help. fnInitComplete is the function you want to use here if you want to use the JSON data (v1.10 has a new API which will allow the JSON data to be retrieved in any callback - but fnInitComplete should work just fine).

Allan