Partner Commissions Report 01

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Partner Commissions Report</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/rowGroup/1.3.0/js/dataTables.rowGroup.min.jsscript"></script>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
        <!-- DataTables Buttons extension for export options -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/cssbuttons.dataTables.min.css">
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.7.1js/dataTables.buttons.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.7.1js/buttons.flash.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libsjszip/3.1.3/jszip.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.7.1js/buttons.html5.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.7.1js/buttons.print.min.js"></script>
    </head>
<body>
    <table id="partnerReport" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Partner Name</th>
                <th>Created From</th>
                <th>PO #</th>
                <th>Invoice Date</th>
                <th>Invoice #</th>
                <th>Total Cost</th>
                <th>Total Price</th>
                <th>Gross Profit</th>
                <th>Payment Date</th>
                <th>Payment #</th>
                <th>Payment Amount</th>
                <th style="color:#036afb;">Commission</th>
                <th>Customer</th>
            </tr>
        </thead>
        
       ...

CSS

tr.partner_group,
tr.invoice-group {
    font-weight: bold;
}
tfoot {
    font-weight: bold;
}
.dataTables_length {
    padding-right: 15px;
}

.openInvoices_alert {
    font-weight: 400; 
    font-size: 10pt; 
    color: #e8103b;
}

JavaScript

$(document).ready(function() {
var table = $('#partnerReport').DataTable({
    "columnDefs": [
        { "visible": false, "targets": 0 }
    ],
    "order": [[0, 'asc']],
    "displayLength": 50,
    "drawCallback": function (settings) {
      var api = this.api();
      var rows = api.rows({ page: 'current' }).nodes();
      var last = null;
      var partnerIndexArray = [];
      var invoiceIndexArray = []
      const totalCostColumnIndex = 4;
      const totalPriceColumnIndex = 5;
      const totalGrossColumnIndex = 6;
      const paymentAmountColumnIndex = 9;
      const totalCommissionColumnIndex = 10;
    
      function calculateColumnSum(startIndex, endIndex, columnIndex) {
          var sum = 0;
          for (var i = startIndex; i < endIndex; i++) {
              var value = $(rows).eq(i).find('td').eq(columnIndex).text();
              sum += parseFloat(value.replace('$', '').replace(',', '')) || 0;
          }
          return sum;
      }
 
      const currencyFormatter = new Intl.NumberFormat('en-US', {
          style: 'currency',
          currency: 'USD',
      });
 
      api.column(0, { page: 'current' }).data().each(function (group, i) {
          if (last !== group) {
              partnerIndexArray.push(i);
              $(rows).eq(i).before(
                  '<tr style="cursor: pointer; background-color: #ffffff; color: #036afb;" class="partner_group">' +
                      '<td colspan="4">' + group + '</td>' +
                      '<td><span class="group-total-cost"></span></td>' +
                      '<td><span class="group-total-price"></span></td>' +
                      '<td><span class="group-total-gross"></span></td>' +
                      '<td colspan="2"></td>' +
                      '<td><span class="group-amount-paid"></span></td>' +
                      '<td><span style="color:#e8103b" class="group-total-commission"></span></td>' +
                      '<td></td>' +
                  '</tr>'
              );
     ...