Strange happenings with footer

I apologize... I realized I posted this in the wrong forum. Should be in Using jQuery.

I am having issues with the footer of my dataTable. On the initial load it looks as desired...


BUT... if a do a reset and then another load the footer looks like this...


Note the blank area gets filled with 6.00 and the Total: with 3.00. These are actually adjacent cells from the tbody.

Here is the initialization code...

1. oTable = $('#timesheet').dataTable( {
2.     'bAutoWidth': false,
3.     'bDestroy': true,
4.     'bFilter': false,
5.     'bInfo': false,
6.     'bLengthChange': false,
7.     'bPaginate': false,
8.     'bProcessing': false,
9.     'bServerSide': true,
10.     'bSort': false,
11.     'bVisible': true,
12.     'sAjaxSource': 'files_json/get_Timesheet.php' + sParams,
13.    
14.     'aoColumns': [
15.         { 'mDataProp': 'ts_ID',         'bVisible': false },
16.         { 'mDataProp': 'ts_Project',   'bVisible': false },
17.         { 'mDataProp': 'ts_Phase',      'bVisible': false },
18.         { 'mDataProp': 'ts_PhaseCodes','bVisible': false },
19.         { 'mDataProp': 'ts_cProject',  'sClass': 'udatal' },
20.         { 'mDataProp': 'ts_cPhase',     'sClass': 'udatal' },
21.         { 'mDataProp': 'ts_Mon',        'sClass': 'udatar' },
22.         { 'mDataProp': 'ts_Tue',        'sClass': 'udatar' },
23.         { 'mDataProp': 'ts_Wed',        'sClass': 'udatar' },
24.         { 'mDataProp': 'ts_Thr',        'sClass': 'udatar' },
25.         { 'mDataProp': 'ts_Fri',        'sClass': 'udatar' },
26.         { 'mDataProp': 'ts_Sat',        'sClass': 'udatar' },
27.         { 'mDataProp': 'ts_Sun',        'sClass': 'udatar' },
28.         { 'mDataProp': 'ts_cTotal',     'sClass': 'udatar' }
29.     ], // End of aoColumns

1. "fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
2.     // Calculate the sum for Mon
3.     var monTotal = 0.0;
4.     var tueTotal = 0.0;
5.     var wedTotal = 0.0;
6.     var thrTotal = 0.0;
7.     var friTotal = 0.0;
8.     var satTotal = 0.0;
9.     var sunTotal = 0.0;
10.     var totTotal = 0.0;
11.    
12.     for ( var i=0; i<aaData.length; i++ ) {
13.         if ( aaData[i]['ts_Mon'] == null || aaData[i]['ts_Mon'] == '' ) { monTotal += 0; } else { monTotal += parseFloat(aaData[i]['ts_Mon']); }
14.         if ( aaData[i]['ts_Tue'] == null || aaData[i]['ts_Tue'] == '' ) { tueTotal += 0; } else { tueTotal += parseFloat(aaData[i]['ts_Tue']); }
15.         if ( aaData[i]['ts_Wed'] == null || aaData[i]['ts_Wed'] == '' ) { wedTotal += 0; } else { wedTotal += parseFloat(aaData[i]['ts_Wed']); }
16.         if ( aaData[i]['ts_Thr'] == null || aaData[i]['ts_Thr'] == '' ) { thrTotal += 0; } else { thrTotal += parseFloat(aaData[i]['ts_Thr']); }
17.         if ( aaData[i]['ts_Fri'] == null || aaData[i]['ts_Fri'] == '' ) { friTotal += 0; } else { friTotal += parseFloat(aaData[i]['ts_Fri']); }
18.         if ( aaData[i]['ts_Sat'] == null || aaData[i]['ts_Sat'] == '' ) { satTotal += 0; } else { satTotal += parseFloat(aaData[i]['ts_Sat']); }
19.         if ( aaData[i]['ts_Sun'] == null || aaData[i]['ts_Sun'] == '' ) { sunTotal += 0; } else { sunTotal += parseFloat(aaData[i]['ts_Sun']); }
20.         if ( aaData[i]['ts_cTotal'] == null || aaData[i]['ts_cTotal'] == '' ) { totTotal += 0; } else { totTotal += parseFloat(aaData[i]['ts_cTotal']); }
21.     }
22.    
23.     var nCells = nRow.getElementsByTagName('th');
24. //                    nCells[0].innerHTML = '';
25. //                    ncells[1].innerHTML = 'Total';
26.     nCells[2].innerHTML = monTotal.toFixed(2);
27.     nCells[3].innerHTML = tueTotal.toFixed(2);
28.     nCells[4].innerHTML = wedTotal.toFixed(2);
29.     nCells[5].innerHTML = thrTotal.toFixed(2);
30.     nCells[6].innerHTML = friTotal.toFixed(2);
31.     nCells[7].innerHTML = satTotal.toFixed(2);
32.     nCells[8].innerHTML = sunTotal.toFixed(2);
33.     nCells[9].innerHTML = totTotal.toFixed(2);
34. }, // End of fnFooterCallback

If I uncomment lines 24 and 25 then the table does not render at all.

Here is the table definition.

1. <table id="timesheet" class="inner" border="0" cellspacing="0" cellpadding="0" width="100%">
2.     <thead>
3.         <tr>
4.             <th>ID</th>
5.             <th>Project</th>
6.             <th>Phase</th>
7.             <th>PhaseCodes</th>
8.             <th class="udatal" width="33%">Project-Name</th>
9.             <th class="udatal" width="25%">Phase-Description</th>
10.             <th class="udatar" width="05%">Mon</th>
11.             <th class="udatar" width="05%">Tue</th>
12.             <th class="udatar" width="05%">Wed</th>
13.             <th class="udatar" width="05%">Thr</th>
14.             <th class="udatar" width="05%">Fri</th>
15.             <th class="udatar" width="05%">Sat</th>
16.             <th class="udatar" width="05%">Sun</th>
17.             <th class="udatar" width="07%">Total</th>
18.         </tr>
19.     </thead>
20.     <tbody>
21.     </tbody>
22.     <tfoot>
23.         <tr class="footer">
24.             <th>ID</th>
25.             <th>Project</th>
26.             <th>Phase</th>
27.             <th>PhaseCodes</th>
28.             <th class="udatal" width="33%"></th>
29.             <th class="udatar" width="25%">Total:</th>
30.             <th class="udatar" width="05%"></th>
31.             <th class="udatar" width="05%"></th>
32.             <th class="udatar" width="05%"></th>
33.             <th class="udatar" width="05%"></th>
34.             <th class="udatar" width="05%"></th>
35.             <th class="udatar" width="05%"></th>
36.             <th class="udatar" width="05%"></th>
37.             <th class="udatar" width="07%"></th>
38.         </tr>
39.     </tfoot>
40. </table>

BTW rows 13-20 of the second group is my code (I'm a newbie) for summing the column values for inclusion in the footer. If anyone has a better method please let me know.

Is this issue a bug in jQuery or am I doing something wrong. I'm betting on the latter.

TIA for any assistance.
jdadwilson

• Topic Participants

• jamesawilson

• adobewebs

• jakecigar