title: Datatable sum column by row grouping and show sum result at the end of each group
body: <p>I am using datatable row grouping from <a href="https://datatables.net/examples/advanced_init/row_grouping.html" rel="nofollow noreferrer">https://datatables.net/examples/advanced_init/row_grouping.html</a> and it works fine.</p>
  
  <p>I have following scenario:
  <a href="https://i.stack.imgur.com/vijMn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vijMn.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>At the end of listing , want to show a final row of total amount. 
  How to accomplish that.</p>
  
  <p>Js used code is:</p>
  
  <pre><code>$(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(
                      '&lt;tr class="group" style="background-color:#F5F5F5;"&gt;&lt;td colspan="3"&gt;'+group+'&lt;/td&gt;&lt;/tr&gt;'
                  );
  
                  last = group;
              }
          } );
      }
      });
  });
  </code></pre>