Datatables - Calculate Column Total when using Row Groups

Question

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.net/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

Chris Neilson · Accepted Answer · 2013-08-11 15:58:53Z

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);

answered Aug 11, 2013 at 15:58

Chris Neilson

362 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Redwall · Accepted Answer · 2013-08-11 15:54:06Z

1

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

Updated JSFiddle http://jsfiddle.net/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.

answered Aug 11, 2013 at 15:54

Redwall

1,0205 gold badges31 silver badges56 bronze badges

2 Comments

frnhr Over a year ago

This appears to not account for multiple pages of data.

Guruprasad J Rao Over a year ago

Beautiful buddy.. you saved my life.. :)

Collectives™ on Stack Overflow

Datatables - Calculate Column Total when using Row Groups

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related