Ist es möglich, <footer> in bootstrapable zu beheben?

Question

Ich habe die showFooter-Eigenschaft gefunden. aber ich verstehe nicht, wie man den Inhalt dafür anpasst.

ich brauche nur drei von insgesamt 8 zu füllen ...

so Tabelle sieht im Grunde wie folgt:

<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

Sie Inhalt in der Fußzeile, indem Sie das data-footer-formatter Attribut auf die Spalte anpassen Sie möchten die Fußzeile hinzufügen und dieses Attribut einer definierten JavaScript-Funktion zuweisen. Hier ein Beispiel:

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

Hinweis Ich bin nicht <tfoot> überhaupt hier verwendet wird. Das liegt daran, dass <tfoot> nicht mit der Dropdown-Liste für die Anzeigenspalten funktioniert, aber dies wird (wenn ich das data-show-columns="true"-Attribut für das Element <table> wie im obigen Beispiel verwenden würde). Sie können die Fußzeile auch mit dem Attribut data-footer-style formatieren. In meinem Beispiel mache ich den gesamten Text in der Fußzeile fett.

Sie können den Code in Aktion sehen hier: https://jsfiddle.net/3mou92px/9/