i found showfooter property. not how customize content that.
i need fill 3 of total 8 in ...
so table looks 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>
you can customize content in footer adding data-footer-formatter attribute column want add footer , setting attribute equal defined javascript function. here's 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> @ here. because <tfoot> won't work show columns dropdown list (if use data-show-columns="true" attribute on <table> element did in example above). can style footer using data-footer-style attribute. in example, i'm making text in footer bold.
you can see code in action here: https://jsfiddle.net/3mou92px/9/
