Sum in rowGroup

antoniocib

Hi guys, I shot a few examples and on the form and I did not find the function that in rowGroup makes the sum, can you help me?

kthorngren

This example shows how to provide averages for each group. You can change the code to shwo the sum by removing / rows.count() on line 20.

Kevin

antoniocib

Hi Kevin,

Look there:

var table4 = $('#dl1').DataTable( {
    dom: 'Bfrtip',
    ajax: {
            url: 'php/table.dl1.php',
            type: 'POST'
    },
    order:[8],
    rowGroup: {
        startRender: null,
        endRender: function ( rows, group ) {

            var ageAvg = rows
                .data()
                .pluck(5)
                .reduce( function (a, b) {
                    return a + b*1;
                }, 0) ;

            return $('<tr/>')
                .append( '<td colspan="3">Averages for ''</td>' )
                .append( '<td>'+ageAvg+'</td>' )
                .append( '<td/>' )
                .append( '<td></td>' );
        },
        dataSrc: function (data) {
        return data.dlinea;
      }
    },

columns:[
    {
        "data":"ddt"
    },
 {
     "data": "cliente"
 },
 {
     "data": "carico"
 },
 {
     "data":"pr"
 },

 {
     data:null, render: function (data,type,row)
     {
         return data.scarico+ ' ' +data.scarico_m;
     }
 },
 {
 "data": "epal",
 },
 {
    "data": "perd",
 },
 {
     "data":"ind"
 },
 {
     "data": "dlinea"
 },
 {
    "data": "tlinea"
 }
],

Return me an error:
in line 710:

The error is :

Uncaught SyntaxError: missing ) after argument list

kthorngren

.append( '<td colspan="3">Averages for ''</td>' )

You have two ' together (''</td>')that is causing the syntax error. Remove one of them.

Kevin

antoniocib

@kthorngren the sum return NaN..

antoniocib

the code js:

    rowGroup: {
        endRender: function ( rows, group ) {

            var ageAvg = rows
                .data()
                .pluck(5)
                .reduce( function (a, b) {
                    return a + b;
                }, 0) ;

            return $('<tr/>')

                .append( '<td>'+ageAvg+'</td>' );

        },
        dataSrc: function (data) {
        return data.dlinea;
      }
    },

The output:

kthorngren

.pluck(5)

Read the pluck() docs. This is the data you want to pluck from the row data. You are using objects so change the 5 to the data object you want to some.

If you still get NaN then either provide a test case showing the issue or use console.log statements to debug what is happening in the function.

Kevin

antoniocib

@kthorngren this is the test case:
http://damoratraffico.netsons.org/kevin/scrivania1.html

kthorngren

Is the column you want to sum "data": "epal",? If so then change pluck to pluck('epal').

Kevin

antoniocib

@kthorngren if i want stamp the sum of epal and perd how i do?

antoniocib

@kthorngren i solved in this way

            var epalcount = rows
                .data()
                .pluck('epal')
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0) ;

                            var indcount = rows
                                    .data()
                                    .pluck('ind')
                                    .reduce( function (a, b) {
                                            return intVal(a) + intVal(b);
                                    }, 0) ;

                                    var perdcount = rows
                                            .data()
                                            .pluck('perd')
                                            .reduce( function (a, b) {
                                                    return intVal(a) + intVal(b);
                                            }, 0) ;

                                            var epcount = (epalcount + perdcount);

i'm so happy!!!! Thanks man for all ur support!!

kthorngren

Good, I'm glad you got it worked out!

Kevin

sgalicia

Hello! @antoniocib
I have the same problem, but I just want to add only one column (amount)
I tried it with the examples above but it still doesn't work

this is my code,(copy it from above and adjust it to mine)
rowGroup: {
var sumimporte = rows
.data()
.pluck('importe')
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0) ;
dataSrc: 'uuid'
},
sorry i'm very new to the subject, thanks

colin

@sgalicia We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Ficos

I have a similar problem. Please have a look at my testcase
Rowgroup on column 0 (= rubrieken.box).

rowGroup: {
            startRender: null,
            endRender: function (rows, group) {
                // Remove the formatting to get integer data for summation
                var intVal = function (i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                            i : 0;
                };

                var uitkering = rows
                    .data()
                    .pluck('vermogen_details.boekjr3')
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                uitkering = $.fn.dataTable.render.number('.', ',', 2, '').display(uitkering);

                
                var color = 'style="color:red"';
                return $('<tr ' + color + '/>')
                    .append('<td colspan="4">Totaal voor box ' + group + '</td>')
                    .append('<td>' + '</td>')
                    .append('<td/>')
                    .append('<td></td>')
                    .append('<td style: "text-align: right;">' + uitkering + '</td>');
                /*
                    .append('<td className: "text-right">' + salaryAvg + '</td>')
                    .append('<td className: "text-right">' + uitkering + '</td>');
                */
            },
            dataSrc: 'rubrieken.box'
        },

On serverside:

Editor::inst( $db, 'vermogen_details', 'id' )
    ->fields(
        Field::inst('vermogen_details.rubriek')
            ->options( Options::inst()
                ->table( 'rubrieken' )
                ->value( 'id' )
                ->label( 'omschrijving' )
            ),
        Field::inst('rubrieken.omschrijving'),
        Field::inst('rubrieken.box'),
        Field::inst('vermogen_details.omschrijving'),
        Field::inst('vermogen_details.nummer'),
        Field::inst( 'vermogen_details.2020' ),
        Field::inst( 'vermogen_details.2021' ),
        Field::inst( 'vermogen_details.boekjr3' )
    )
    ->leftJoin( 'rubrieken', 'rubrieken.id', '=', 'vermogen_details.rubriek' )
    ->process( $_POST )
    ->json();

I need to sum the last 3 columns (2020,2021,boekjr3). I am trying on the last. If dataSrc is set to vermogen_details.boekjr3, then group in return will be the sum I am looking for, but I need to group on the first column. In which case sum always returns 0. What am I doing wrong here?

Thank you

colin

This example from this thread should help, it's showing how to add a sum value into the RowGroup header.

Colin

Ficos

I am sorry Colin, but the answer is not there. I figured it out: using double pluck() solved the problem:

var total2 = rows
                    .data()
                    .pluck('vermogen_details')
                    .pluck('boekjr3')
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

Thanks anyway.