Bootstrap Table Add Table Footer For Total Amount

To add a footer row to the Bootstrap Table by Wenzhixin, set the data-show-footer attribute of that table to true.

<table id="tblInvoiceReport" data-show-footer="true">

Next is to set the data-footer-formatter of the Amount column using a JavaScript function.

<th data-field="Amount" data-searchable="true" data-class="tdDetails" data-footer-formatter="TotalFormatter">Amount</th>   

And here's the JavaScript function to compute the total amount.

function TotalFormatter (items) {
 var totalPrice = 0;
 items.forEach(function (item) {
  totalPrice = parseFloat(totalPrice) + parseFloat(item.Amount.replace('$','').replace(',',''));
 });

 return '$' + parseFloat(totalPrice).toLocaleString(undefined, {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
 });
};

Output