是否可以在 bootstraptable 中修复 <footer> ？答案

【问题标题】：Is it possible to fix <footer> in bootstraptable?是否可以在 bootstraptable 中修复 <footer> ？
【发布时间】：2016-06-07 05:06:43
【问题描述】：

我找到了 showFooter 属性。但我不知道如何为此自定义内容。

我只需要填写总共 8 个中的三个 ...

所以表看起来基本上是这样的：

<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>

【问题讨论】：

你发现了吗？我也有同样的问题。

标签： bootstrap-table

【解决方案1】：

您可以通过将data-footer-formatter 属性添加到要添加页脚的列并将该属性设置为定义的javascript 函数来自定义页脚中的内容。这是一个例子：

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" }
  };
}

请注意，我在这里根本没有使用<tfoot>。那是因为<tfoot> 不能与显示列下拉列表一起使用，但这会（如果我像在上面的示例中那样在<table> 元素上使用data-show-columns="true" 属性）。您还可以使用data-footer-style 属性设置页脚样式。在我的示例中，我将页脚中的所有文本设为粗体。

您可以在此处查看正在运行的代码：https://jsfiddle.net/3mou92px/9/

【讨论】：