Rowgroup subtotal and total

by thelittlewozniak

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<table class="grid" width="100%">
  <thead>
    <tr>
      <th>Consulente</th>
      <th>target</th>
      <th>Visti</th>
      <th>Chiusi</th>
      <th>Ratio</th>
      <th>Venduto €</th>
      <th>Aps €</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td column="Consulente:">MRS FOUR</td>
      <td column="target:">WALK INS</td>
      <td column="Visti:">2</td>
      <td column="Chiusi:">1</td>
      <td column="Ratio:">1.00</td>
      <td column="Venduto €:">3.903€</td>
      <td column="Aps €:">1.952€</td>
    </tr>

    <tr>
      <td column="Consulente:">MRS FOUR</td>
      <td column="target:">ANNULLAMENTI</td>
      <td column="Visti:">0</td>
      <td column="Chiusi:">2</td>
      <td column="Ratio:">0.00</td>
      <td column="Venduto €:">-1.398€</td>
      <td column="Aps €:">-699€</td>
    </tr>

    <tr>
      <td column="Consulente:">MISTER ONE</td>
      <td column="target:">RINNOVI</td>
      <td column="Visti:">0</td>
      <td column="Chiusi:">2</td>
      <td column="Ratio:">0.00</td>
      <td column="Venduto €:">3.388€</td>
      <td column="Aps €:">1.694€</td>
    </tr>

    <tr>
      <td column="Consulente:">MISTER ONE</td>
      <td column="target:">WALK INS</td>
      <td column="Visti:">9</td>
      <td column="Chiusi:">2</td>
      <td column="Ratio:">4.50</td>
      <td column="Venduto €:">4.122€</td>
      <td column="Aps €:">2.061€</td>
    </tr>

    <tr>
      <td column="Consulente:">MISTER ONE</td>
      <td column="target:">RIFERITI</td>
      <td column="Visti:">2</td>
      <td column="Chiusi:">2</td>
      <td column="Ratio:">1.00</td>
      <td column="Venduto €:">4.122€</td>
      <td column="Aps €:">2.061€</td>
    </tr>

    <tr>
      <td column="Consulente:">MISTER ONE</td>
      <td...

CSS

.dataTables_scrollBody thead{
        visibility:hidden;
    }
    .group{
        background-color:#333!important;
        font-size:11px;
        color:#fff!important;
        opacity:0.7;
    }

JavaScript

$(document).ready(function () {
  var table = $(".grid")
    .not(".initialized")
    .addClass("initialized")
    .show()
    .DataTable({
      columnDefs: [{ visible: false, targets: 0 }],
      order: [[0, "asc"]],
      stateSave: false,
      stateDuration: 60 * 60 * 24 * 365,
      displayLength: 100,
      sScrollX: "100%",
      dom: "lfTrtip",
      drawCallback: function (settings) {
        var api = this.api()
        var rows = api.rows({ page: "current" }).nodes()
        var last = null
        var colonne = api.row(0).data().length
        var totale = new Array()
        totale["Totale"] = new Array()
        var groupid = -1
        var subtotale = new Array()

        api
          .column(0, { page: "current" })
          .data()
          .each(function (group, i) {
            if (last !== group) {
              groupid++
              $(rows)
                .eq(i)
                .before('<tr class="group"><td>' + group + "</td></tr>")
              last = group
            }

            val = api.row(api.row($(rows).eq(i)).index()).data() //current order index
            $.each(val, function (index2, val2) {
              if (typeof subtotale[groupid] == "undefined") {
                subtotale[groupid] = new Array()
              }
              if (typeof subtotale[groupid][index2] == "undefined") {
                subtotale[groupid][index2] = 0
              }
              if (typeof totale["Totale"][index2] == "undefined") {
                totale["Totale"][index2] = 0
              }

              valore = Number(
                val2.replace("€", "").replace(".", "").replace(",", "."),
              )
              subtotale[groupid][index2] += valore
              totale["Totale"][index2] += valore
            })
          })
        $("tbody")
          .find(".group")
          .each(function (i, v) {
            var rowCount = $(this).nextUntil(".group").length
            $(this)
              .find("td:first")
           ...