Answers

• kthorngren Posts: 21,622Questions: 26Answers: 5,009

  February 2024 edited February 2024

  Do you mean like this RowGroup example. If not please provide details of what you want to achieve.

  Kevin
• babar Posts: 2Questions: 1Answers: 0

  February 2024

  this is link
  https://live.datatables.net/jedelezu/300/edit
  this is my code
  @model IEnumerable<_Reports>
  <style>
  .tbl-dept > tbody > tr:nth-child(1) {
  color: #0c4a9c;
  font-weight: 700;
  }

              .bg-inverse {
                  font-weight: 800 !important;
              }
          </style>
          <div class="row">
              <div class="col-12 col-xl-12">
                  <div class="box">
                      <div class="box-body p-10">
                          <div class="row">
                              <div class="col-12 p-0">
                                  <table id="tbl-detail_Summary" class="tbl-CategorySalesThrough table table-hover display nowrap" width="100%">
                                      <thead class="bg-inverse">
                                          <tr>
                                              <th class="bb-2 bg-inverse text-center">Group Type</th>
                                              <th class="bb-2 bg-inverse text-center">Description</th>
                                              <th class="bb-2 bg-inverse text-center">Cash</th>
                                              <th class="bb-2 bg-inverse text-center">Meezan Bank DHA </th>
                                              <th class="bb-2 bg-inverse text-center">Js Bank</th>
                                              <th class="bb-2 bg-inverse text-center">Habib Bank Limited</th>
                                              <th class="bb-2 bg-inverse text-center">Meezan Bank Muzammil</th>                  
                                              <th class="bb-2 bg-inverse text-center">Total</th>
                                          </tr>
                                      </thead>
                                      <tbody>
                                          @foreach (var item in Model)
                                          {
                                              <tr data-id="@item.GroupType">
                                                  <td class="text-left">@Html.DisplayFor(m => item.GroupType)</td>
                                                  <td class="text-left">@Html.DisplayFor(m => item.Description)</td>
                                                  <td class="text-right">@Html.DisplayFor(m => item.Cash)</td>
                                                  <td class="text-right">@Html.DisplayFor(m => item.BankAccount1)</td>
                                                  <td class="text-right">@Html.DisplayFor(m => item.BankAccount2)</td>
                                                  <td class="text-right">@Html.DisplayFor(m => item.BankAccount3)</td>
                                                  <td class="text-right">@Html.DisplayFor(m => item.BankAccount4)</td>                            
                                                  <td class="text-right">@Html.DisplayFor(m => item.Total)</td>
                                              </tr>
                                          }
                                      </tbody>
                                      <tfoot>
                                          <tr>
                                              <td class="th-total fcol1 text-left">Total</td>
                                              <td class="th-total fcol2 text-center"></td>
                                              <td class="th-total fcol2 text-right">@Convert.ToDouble(Model.Sum(a => a.Cash)).ToString("#,##0")</td>
                                              <td class="th-total fcol2 text-right">@Convert.ToDouble(Model.Sum(a => a.BankAccount1)).ToString("#,##0")</td>
                                              <td class="th-total fcol2 text-right">@Convert.ToDouble(Model.Sum(a => a.BankAccount2)).ToString("#,##0")</td>
                                              <td class="th-total fcol2 text-right">@Convert.ToDouble(Model.Sum(a => a.BankAccount3)).ToString("#,##0")</td>
                                              <td class="th-total fcol2 text-right">@Convert.ToDouble(Model.Sum(a => a.BankAccount4)).ToString("#,##0")</td>                            
                                              <td class="th-total fcol2 text-right">@Convert.ToDouble(Model.Sum(a => a.Total)).ToString("#,##0")</td>
                                          </tr>
                                      </tfoot>
             </table>
                              </div>
                          </div>
                          <div id="CategorySale-pie" style="width: 100%; min-height: 400px; margin: 0 auto"></div>
                      </di,v>
                  </div>
              </div>
          </div>
          <script>
              $(document).ready(function () {
                  function addCell(tr, content, colSpan = 1) {
                      let td = document.createElement('th');
                      td.colSpan = colSpan;
                      td.textContent = content;
                      tr.appendChild(td);
                  }
  
                  var table = $('#tbl-detail_Summary').DataTable({
  
                      columnDefs: [
                          { visible: false, targets: 0 } // Hide the group column
                      ],
                      'lengthChange': true,
                      'searching': false,
                      'ordering': false,
                      'info': false,
                      'autoWidth': true,
                      'scrollCollapse': true,
                      'paging': false,
                      'scrollY': '50vh',
                      'scrollX': true,
                      'sorting': false,
                      'fixedColumns': {
                          leftColumns: 1
                      },
                      rowGroup: {
                          startRender: function (rows, group) {
                              // Calculate and render row group totals
                              var cashAmountGroup = rows.data().pluck(2).reduce(function (a, b) {
                                  const doublenumber = Number(b.replace(/[^0-9\.]+/g, ""));
                                  return a + doublenumber;
                              }, 0);
  
                              var bankAmount1Group = rows.data().pluck(3).reduce(function (a, b) {
                                  const doublenumber = Number(b.replace(/[^0-9\.]+/g, ""));
                                  return a + doublenumber;
                              }, 0);
  
                              var bankAmount2Group = rows.data().pluck(4).reduce(function (a, b) {
                                  const doublenumber = Number(b.replace(/[^0-9\.]+/g, ""));
                                  return a + doublenumber;
                              }, 0);
  
                              var bankAmount3Group = rows.data().pluck(5).reduce(function (a, b) {
                                  const doublenumber = Number(b.replace(/[^0-9\.]+/g, ""));
                                  return a + doublenumber;
                              }, 0);
  
                              var bankAmount4Group = rows.data().pluck(6).reduce(function (a, b) {
                                  const doublenumber = Number(b.replace(/[^0-9\.]+/g, ""));
                                  return a + doublenumber;
                              }, 0);
  
  
                              var TotalAmountGroup = rows.data().pluck(7).reduce(function (a, b) {
                                  const doublenumber = Number(b.replace(/[^0-9\.]+/g, ""));
                                  return a + doublenumber;
                              }, 0);
  
                              var tr = document.createElement('tr');
                              tr.innerHTML = '<td colspan="0" class="bg-primary"> Sub Total : ' + group + '</td>' +
                                  '<td class="bg-primary text-right">' + cashAmountGroup.toLocaleString() + '</td>' +
                                  '<td class="bg-primary text-right">' + bankAmount1Group.toLocaleString() + '</td>' +
                                  '<td class="bg-primary text-right">' + bankAmount2Group.toLocaleString() + '</td>' +
                                  '<td class="bg-primary text-right">' + bankAmount3Group.toLocaleString() + '</td>' +
                                  '<td class="bg-primary text-right">' + bankAmount4Group.toLocaleString() + '</td>' +
                                  '<td class="bg-primary text-right">' + TotalAmountGroup.toLocaleString() + '</td>';
                              return tr;
                          },
                          endRender: null,
                          dataSrc: 0
                      },
                  });
              });
          </script>
  
• kthorngren Posts: 21,622Questions: 26Answers: 5,009

  February 2024

  Your test case seems to run correctly. Although you have more columns defined in the thead than in the Datatable using columns.

  Please provide details of your questions or issues.

  Kevin