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
Data-Footer-Formatter Function
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
Output
Sample Fiddle: Bootstrap Table Data Formatter Footer On Multiple Columns
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>
function SumFormatter (items) { var total = 0; items.forEach(function (item) { total += parseFloat(item); }); return parseFloat(total) === 0 ? "0" : total; };
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; };
Sample Fiddle: Bootstrap Table Data Formatter Footer On Multiple Columns
Comments
Post a Comment