How to calculate the total sum in HTML table

Question

I have updated the google sheet tables in Web Apps and in this web app with date picker and other filter option. My table consists of some numbers (Row-Chargeback ) I am trying to generate the grand total (Sum) in the top left of my web app.

This should show only the number of selected days

for detailed script refer the sheet sample Sheet

Answer 1

You can use sum() api from datatable to get total of amount. You need to add below cdn.

<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/1.10.15/api/sum().js"></script>

Add HTML element before table tag, to display the sum amount.

<p id="sum"></p>

And then add the below callback function during the table datatable initialization.

drawCallback: function () {
              var api = this.api();
              $("#sum").html(
                "Total Amount: "+api.column( 4, {page:'current'} ).data().sum().toLocaleString()
              );
            }

Note: Since you are using multiple plug-ins, it is beneficial in terms of performance to combine the plug-ins into a single CDN Link wherever possible, rather than making multiple requests to the DataTables CDN.