Is it possible to fix <footer> in bootstraptable?

问题

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>

回答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/

来源：https://stackoverflow.com/questions/37670909/is-it-possible-to-fix-footer-in-bootstraptable