Datatable sum column by row grouping and show sum result at the end of each group

Question

I am using datatable row grouping from https://datatables.net/examples/advanced_init/row_grouping.html and it works fine.

I have following scenario:

Now I want to calculate sum(sub-total) by each grouping abd show result in row at the end of grouping as you see in image.

At the end of listing , want to show a final row of total amount. How to accomplish that.

Js used code is:

$(function() {
    var table = $('#table').DataTable({
    "columnDefs": [
        { "visible": false, "targets": 1 }
    ],
    "order": [[ 1, 'asc' ]],
    "displayLength": 25,
    "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        api.column(1, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr class="group" style="background-color:#F5F5F5;"><td colspan="3">'+group+'</td></tr>'
                );

                last = group;
            }
        } );
    }
    });
});

Answer 1

For the same exemple here : https://datatables.net/examples/advanced_init/row_grouping.html

I have made some changes inside "drawCallback": function ( settings ) {

Check this fiddle https://jsfiddle.net/bLykqbo6/110/

I hope it helps

Answer 2

  "drawCallback": function ( settings ) {
    var api   = this.api();
    var rows  = api.rows( {page:'current'} ).nodes();
    var last  = null;     
    var sum   = 0;
    var groupColumn = 1; //index of column which you are going to group by.
    var amtColumn   = 3; // index of column which you are going to sum.
    api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
      if ( last !== group ) {
        api.rows().data().each( function(item){
          if (item[groupColumn] == group){
            sum = sum + (+item[amtColumn]);
          }
        });
        $(rows).eq( i ).before(
          '<tr class="group"><td colspan="2" style="background-color: #e7e7e7;"><b>'+group+'</b></td><td style="background-color: #e7e7e7;"><b>'+ sum +'</b></td></tr>'
        );
        last = group;
        sum  = 0;
      }
    });
  }