Is it possible to fix <footer> in bootstraptable? - bootstrap-table

Question

i found the showFooter Property. but i do not get how to customize the Content for that.
i only need to fill three of total 8 in ...
so table Looks basically like this:
<div class="table-responsive">
<table class="table table-bordered" id="tblKontoauszug">
<thead>
<tr>
<th data-sortable="#sortable" data-sorter="dateSorter">Buchungsdat.</th>
<th data-sortable="#sortable">Belegnr.</th>
<th data-sortable="#sortable">BA</th>
<th data-sortable="#sortable" data-sorter="betragSorter">Betrag</th>
<th data-sortable="#sortable">Buchungstext</th>
<th data-sortable="#sortable">Gegenkontoart</th>
<th data-sortable="#sortable">Gegenkonto</th>
<th data-sortable="#sortable">Bezeichnung</th>
</tr>
<tr class="info text-bold">
<td>
#if ( Model.Zeilen.Count() > 0 )
{
<span>#Model.Zeilen.Min(b => b.Buchungsdatum).ToShortDateString()</span>
}
</td>
<td colspan="2">Anfangsbestand</td>
<td class="text-right">#Model.Anfangsbestand.ToString("N")</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tfoot>
<tr class="info text-bold">
<td>
#if ( Model.Zeilen.Count() > 0 )
{
<span>#Model.Zeilen.Max( b => b.Buchungsdatum ).ToShortDateString()</span>
}
</td>
<td colspan="2">Endbestand</td>
<td class="text-right #( Model.Endbestand < 0 ? "negative" : "")">#Model.Endbestand.ToString( "N" )</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
#foreach ( var zeile in Model.Zeilen )
{
<tr>
<td>#zeile.Buchungsdatum.ToShortDateString()</td>
<td>#zeile.Belegnummer</td>
<td title="#zeile.BelegartText">#zeile.Belegart</td>
<td class="text-right #( zeile.Betrag < 0 ? "negative" : "")">#zeile.Betrag.ToString("N")</td>
<td>#zeile.Buchungstext</td>
<td>#zeile.Gegenkontoart</td>
<td>#zeile.Gegenkonto</td>
<td>#zeile.Bezeichnung</td>
</tr>
}
</tbody>
</table>
</div>

Answer 1

You can customize content in the footer by adding the data-footer-formatter attribute to the column you want to add the footer to and setting that attribute equal to a defined javascript function. Here's an example:
HTML:
<table data-toggle="table" data-show-footer="true" data-footer-style="footerStyle" data-show-columns="true">
<thead>
<tr>
<th data-sortable="true" data-footer-formatter="totalText">Name</th>
<th data-sortable="true" data-footer-formatter="carsSum"># Cars</th>
</tr>
</thead>
<tbody>
<tr>
<td>Johnny</td>
<td>2</td>
</tr>
<tr>
<td>Zack</td>
<td>3</td>
</tr>
<tr>
<td>Timmy</td>
<td>2</td>
</tr>
</tbody>
</table>
Javascript:
function totalText(data) {
return 'TOTAL';
}
function carsSum(data) {
return '7';
}
function footerStyle(value, row, index) {
return {
css: { "font-weight": "bold" }
};
}
Notice I'm not using <tfoot> at all here. That is because <tfoot> won't work with the show columns dropdown list but this will (if I were to use the data-show-columns="true" attribute on the <table> element as I did in the example above). You can also style the footer using the data-footer-style attribute. In my example, I'm making all text in the footer bold.
You can see the code in action here: https://jsfiddle.net/3mou92px/9/