I am using datatables. In addition to the regular table set up I am using datatables to add

Row Groups - Outlined here

Column Totals - Using Footer Callbacled Outlined here

I have a working Demo here /

Everything is working fine except my totals are being calculated 1 column off to the right (as you can easily see from demo) I am pretty sure the reason is because of the way groups works and is displayed.

I would like to display the totals under the correct column. i.e. shift all totals 1 column left to line up correctly.

The code used uses the first <td> in the row to use as the group name so for example

<td>Joe Hammer</td> is used as a group name.

This is the code I am using to calculate the totals

"fnFooterCallback": function (nRow, aasData, iStart, iEnd, aiDisplay) {

        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++) {
                total = total + parseFloat(aasData[aiDisplay[i]][columnaActual]);
            }
            $($(nRow).children().get(columnaActual)).html(total);

        } // end 

I am using datatables. In addition to the regular table set up I am using datatables to add

Row Groups - Outlined here

Column Totals - Using Footer Callbacled Outlined here

I have a working Demo here http://jsfiddle/c5UXe/

Everything is working fine except my totals are being calculated 1 column off to the right (as you can easily see from demo) I am pretty sure the reason is because of the way groups works and is displayed.

I would like to display the totals under the correct column. i.e. shift all totals 1 column left to line up correctly.

The code used uses the first <td> in the row to use as the group name so for example

<td>Joe Hammer</td> is used as a group name.

This is the code I am using to calculate the totals

"fnFooterCallback": function (nRow, aasData, iStart, iEnd, aiDisplay) {

        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++) {
                total = total + parseFloat(aasData[aiDisplay[i]][columnaActual]);
            }
            $($(nRow).children().get(columnaActual)).html(total);

        } // end 

• javascript
• jquery
• datatables

Share Improve this question Follow edited Sep 2, 2013 at 16:30 madth3 7,3441212 gold badges5252 silver badges7474 bronze badges asked Aug 11, 2013 at 15:11 RedwallRedwall 1,02055 gold badges3131 silver badges5656 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I believe you can fix it entirely through tweaking the JS.

Update the columns to add

var columnas = [2, 3, 4, 5, 6, 7, 8];

Then get columnaActual-1 instead of columnaActual

$($(nRow).children().get(columnaActual-1)).html(total);

Feels weird answering this myself, but just incase anyone else has the same issue here you go.

Updated JSFiddle http://jsfiddle/c5UXe/1/

I added an extra <th> to the column total and I removed the 2nd <th> in column total via CSS setting the style to none.

I then Updated the Columns to add to this

var columnas = [2, 3, 4, 5, 6, 7,8]; //the columns you wish to add

Removing the first 1 and adding number 8

It is a pretty easy fix which mostly involved tweaking the HTML rather than the JS.