Group by SubTotal and Heading Print on Top of that Group

rakeshkumar123

$(document).ready(function() {
    $('#example').DataTable( {
        order: [[2, 'asc']],        
        rowGroup: {
            startRender: null,
            endRender: function ( rows, group ) {
                var salaryAvg = rows
                    .data()
                    .pluck(5)
                    .reduce( function (a, b) {
                        return a + b.replace(/[^\d]/g, '')*1;
                    }, 0) / rows.count();
                salaryAvg = $.fn.dataTable.render.number(',', '.', 0, '$').display( salaryAvg );
 
                var ageAvg = rows
                    .data()
                    .pluck(3)
                    .reduce( function (a, b) {
                        return a + b*1;
                    }, 0) / rows.count();
 
                return $('<tr/>')
                    .append( '<td colspan="3">Averages for '+group+'</td>' )
                    .append( '<td>'+ageAvg.toFixed(0)+'</td>' )
                    .append( '<td/>' )
                    .append( '<td>'+salaryAvg+'</td>' );
            },
            dataSrc: 2
        }       
    } );
} );

kthorngren

Please provide more details of the problem description. Please provide a link to your page or a test case so we can see what is happening and offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

rakeshkumar123

Ref : https://codepen.io/jasonblewis/pen/PWgwPL

Something like this but sub total should display on bottom of that group and final total at the bottom of table

kthorngren

I'm confused. Your first post you have code using the RowGroup Extension but your test case you are doing something like this example.

sub total should display on bottom of that group

Use rowGroup.endRender as shown in this example.

final total at the bottom of table

Use the footerCallback as shown in this example.

Kevin

rakeshkumar123

@kthorngren, Thank you so much for your support

From this example looking for this result which I have attached excel.

Because want to display heading on top of that group and sub total at bottom of that group and grand total at last row.

Thank you @kthorngren

rakeshkumar123

$(document).ready(function() {
    $('#example').DataTable( {
        order: [[2, 'asc']],
        rowGroup: {
        
            startRender: function ( rows, group ) {
                return $('<tr/>')
                    .append( '<td colspan="6">Office :  '+group+'</td>' ) ;

            },
            
            endRender: function ( rows, group ) {
                var salaryAvg = rows
                    .data()
                    .pluck(5)
                    .reduce( function (a, b) {
                        return a + b.replace(/[^\d]/g, '')*1;
                    }, 0) / rows.count();
                salaryAvg = $.fn.dataTable.render.number(',', '.', 0, '$').display( salaryAvg );
 
                return $('<tr/>')
                    .append( '<td colspan="3"></td>' )
                    .append( '<td></td>' )
                    .append( '<td>Sub Total : </td>' )
                    .append( '<td>'+salaryAvg+'</td>' );
            },      
            
            dataSrc: 2
        }
    } );
} );

Very close to solution by using above code but now how to add grand total ?

rakeshkumar123

Thank you,

Found the solution