Donate

Bootstrap Table Footer Data Footer Formatter Not Computing Correctly On Multiple Columns

Good Afternoon!
I recently faced a minor bug in Bootstrap Table by Wenzhixin using a single data-footer-formatter for four columns. I expected that this will compute the column values but the expected result shows that all columns total are zero. Bootstrap Table
<table id="tblBillingReport"
    class="TableBorderCollapse table-striped "
    data-toggle="table"
    data-search="true"
    data-show-columns="false"
    data-advanced-search="false"
    data-id-table="advancedTable"
    data-show-export="true"
    data-toolbar="#toolbar"
    data-click-to-select="true"
    data-unique-id="objectID"
    data-cookie="true"
    data-show-footer="true"
    data-height="700"
    data-cookie-id-table="tblBillingReportID">
 <thead>
  <tr style="background-color: #FFFFFF;">
   <th data-field="Location" data-searchable="true" data-class="tdDetails">Location</th>
   <th data-field="Adds" data-searchable="true" data-class="tdDetails" data-footer-formatter="SumFormatter">A</th>
   <th data-field="Changes" data-searchable="true" data-class="tdDetails" data-footer-formatter="SumFormatter">C</th>
   <th data-field="Deletes" data-searchable="true" data-class="tdDetails" data-footer-formatter="SumFormatter">D</th>
   <th data-field="NonBill" data-searchable="true" data-class="tdDetails" data-footer-formatter="SumFormatter">K</th>
  </tr>
 </thead>
 <tbody>
  @for (int i = 0; i < Model.ReportBilling.Count; i++)
  {
   <tr>
    <td>@Html.DisplayFor(m => m.ReportBilling[i].Adds)</td>
    <td>@Html.DisplayFor(m => m.ReportBilling[i].Changes)</td>
    <td>@Html.DisplayFor(m => m.ReportBilling[i].Deletes)</td>
    <td>@Html.DisplayFor(m => m.ReportBilling[i].NonBill)</td>
   </tr>
  }
 </tbody>
</table>
Data-Footer-Formatter Function
function SumFormatter (items) {
 var total = 0;

  items.forEach(function (item) {
   total += parseFloat(item);
  });

 return parseFloat(total) === 0 ? "0" : total;
};
The fix for this issue is to check the field name in the data-formatter function and then perform the computation once the condition is satisfied. Data-Footer-Formatter Function Modified
function SumFormatter (items) {
 var total = 0;

 if (this.field === "Adds") {
  items.forEach(function (item) {
   total += parseFloat(item.Adds);
  });
 }
 else if (this.field === "Changes") {
  items.forEach(function (item) {
   total += parseFloat(item.Changes);
  });
 }
 else if (this.field === "Deletes") {
  items.forEach(function (item) {
   total += parseFloat(item.Deletes);
  });
 }
 else {            
  items.forEach(function (item) {
   total += parseFloat(item.NonBill);
  });
 }

 return parseFloat(total) === 0 ? "0" : total;
};
Output
Bootstrap Table Footer Data Footer Formatter Not Computing Correctly On Multiple Columns
Sample Fiddle: Bootstrap Table Data Formatter Footer On Multiple Columns

Comments

Donate

Popular Posts From This Blog

WPF CRUD Application Using DataGrid, MVVM Pattern, Entity Framework, And C#.NET

How To Insert Or Add Emojis In Microsoft Teams Status Message

Pass GUID As Parameter To Action Using ASP.NET MVC ContribGrid