fnFooterCallback aasData seems to always be empty

michaelhayespolaris

I am trying to add a footer row that has column totals. The table is loaded and refreshed via AJAX. I have added a fnFooterCallback() to my table definition based on examples I have seen in the forum. When the page load I is NaN in the footer cells for the columns I want to sum. The alert show that: aasData[i][columnaActual] is always 'undefined'. I can understand the parseFloat() possibly failing if it is seeing the Text in the header, but the alert should show the value either way. Any ideas?

Table definition:
[code]
timeTable = $('#timecardDataTable').dataTable({
"bProcessing": true,
"bInfo": false,
"bPaginate": false,
"bFilter": false,
"sAjaxSource": "/Timecard/GetTimecardData?timecardId=" + $('#TimecardId').val(),
"aoColumns": [
{ "mDataProp": "DisplayName" },
{ "mDataProp": "Day1" },
{ "mDataProp": "Day2" },
{ "mDataProp": "Day3" },
{ "mDataProp": "Day4" },
{ "mDataProp": "Day5" },
{ "mDataProp": "Day6" },
{ "mDataProp": "Day7" },
{ "mDataProp": "WeekTotal" },
{ "mDataProp": "EditMe" },
{ "mDataProp": "DeleteMe" },
{ "mDataProp": "ProjectId", "bVisible": false },
{ "mDataProp": "TimeEntryType", "bVisible": false }
],
"fnFooterCallback": function (nRow, aasData, iStart, iEnd, aiDisplay) {
if (iEnd > 0) {
for (var i = 0; i < aasData[0].length; i++) {
var a = document.createElement('td');
$(a).html('');
$(nRow).append(a);
}
var columnas = [1,2,3,4,5,6,7]; //the columns you wish to add
for (var j in columnas) {
var columnaActual = columnas[j];
var total = 0;
for (var i = iStart; i < iEnd; i++) {
alert(aiDisplay[i] + ":" + [columnaActual] + ":" + aasData[i][columnaActual]);
total = total + parseFloat(aasData[aiDisplay[i]][columnaActual]);
}
$($(nRow).children().get(columnaActual)).html(total);
}
}
}
[/code]

The HTML for the table is:
[code]



Project/Category
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
<!-- Row Summary -->
<!-- Edit Me -->
<!-- Delete Me -->
<!-- Project/Category Id -->
<!-- Time Entry Type -->




<!-- Project/Category -->
<!-- Sunday -->
<!-- Monday -->
<!-- Tuesday -->
<!-- Wednesday -->
<!-- Thursday -->
<!-- Friday -->
<!-- Saturday -->
<!-- Row Summary -->
<!-- Edit Me -->
<!-- Delete Me -->
<!-- Project/Category Id -->
<!-- Time Entry Type -->




<!-- Project/Category -->
<!-- Sunday -->
<!-- Monday -->
<!-- Tuesday -->
<!-- Wednesday -->
<!-- Thursday -->
<!-- Friday -->
<!-- Saturday -->
<!-- Row Summary -->
<!-- Edit Me -->
<!-- Delete Me -->
<!-- Project/Category Id -->
<!-- Time Entry Type -->



[/code]

allan

If you add:

[code]
console.log( aasData );
[/code]

to the footer callback, at the top of the function, what does it give? Looking at the code, it does look like it should work... :-)

Allan

michaelhayespolaris

When I have only one Project:

Day1 0
Day2 2
Day3 4
Day4 6
Day5 5
Day6 0
Day7 0
DeleteMe null
DisplayName "12002-Client 1-Project 2"
EditMe "Submitted"
ProjectId 2
TimeEntryType "project"
WeekTotal 17

When I have more than one Project:
[Object { DisplayName="12001-Client 1-Project 1", Day1=0, Day2=0, more...}, Object { DisplayName="12002-Client 1-Project 2", Day1=0, Day2=8, more...}, ...

allan

Looks good but I think the documentation might be slightly misleading you here - you aren't getting a 2D array of strings because your original data source is objects, not arrays (i.e. you are getting back your original data objects).

So rather than working with 2D arrays, you want to work with a 1D array of objects.

I'll correct the documentation!

Allan

michaelhayespolaris

That was it. I changed the code to the following and it worked. It seems a little wordy but it does work. Thanks a bunch.

[code]
"fnFooterCallback": function (nRow, aasData, iStart, iEnd, aiDisplay) {
console.log(aasData);
if (iEnd > 0) {
for (var i = 0; i < aasData[0].length; i++) {
var a = document.createElement('td');
$(a).html('');
$(nRow).append(a);
}
var sunTotal = 0;
var monTotal = 0;
var tueTotal = 0;
var wedTotal = 0;
var thuTotal = 0;
var friTotal = 0;
var satTotal = 0;
var weekTotal = 0;
for (var i = iStart; i < iEnd; i++) {
sunTotal += parseFloat(aasData[i].Day1);
monTotal += parseFloat(aasData[i].Day2);
tueTotal += parseFloat(aasData[i].Day3);
wedTotal += parseFloat(aasData[i].Day4);
thuTotal += parseFloat(aasData[i].Day5);
friTotal += parseFloat(aasData[i].Day6);
satTotal += parseFloat(aasData[i].Day7);
weekTotal += parseFloat(aasData[i].WeekTotal);
}
$($(nRow).children().get(1)).html(sunTotal);
$($(nRow).children().get(2)).html(monTotal);
$($(nRow).children().get(3)).html(tueTotal);
$($(nRow).children().get(4)).html(wedTotal);
$($(nRow).children().get(5)).html(thuTotal);
$($(nRow).children().get(6)).html(friTotal);
$($(nRow).children().get(7)).html(satTotal);
$($(nRow).children().get(8)).html(weekTotal);
}
}
[/code]

kaalis

Hello,
I have fnFooterCallback similar to above one.
When "bServerSide": true, I get aasData[0].length = 24;
When "bServerSide": false, aasData[0] = undefined

So, I hardcoded aasData[0].length to actual value of 24. After that column sum's are generated.

[code]$($(nRow).children()).remove();
for(var i=0;i<24;i++) {
//for(var i=0;i