如何在引導表頁腳中添加多行？

Question

我需要將特定列的所有計數顯示到我的表頁腳中。

但不幸的是，我找不到有關此問題的任何文檔。

知道如何實現嗎？

請參閱下面的圖片以供參考：

當前Output

預計 Output

謝謝。

Answer 1

您可以通過使用 jQuery DataTable 插件來實現這一點。 它有類似的例子here

Answer 2

首先，將此添加到您的表中，

<tfoot>
    <tr>
       <th colspan="6" class="text-right">Total: </th>
       <th colspan="2"></th>
    </tr>
</tfoot>

然后添加以下腳本：

  $('.tableClassor#tableID').DataTable({
  dom: '<"top">rt<"bottom"lfp><"clear">',
  footerCallback: function (row, data, start, end, display) {
  var api = this.api(), data;

    //Remove the formatting to get integer data for summation
    var intVal = function (i) {
      return typeof i === 'string' ?
        i.replace(/[$,]/g, '')*1 :
        typeof i === 'number' ?
        i : 0;
    };

    //Total over all pages, 
    total = api
      .column( 6 )
      .data()
      .reduce( function (a, b) {
          return intVal(a) + intVal(b);
      }, 0);

    //Total over this page
    pageTotal = api
      .column( 6, {page: 'current'})
      .data()
      .reduce(function (a, b) {
          return intVal(a) + intVal(b);
      }, 0 );

    //Update footer
    $(api.column( 6 ).footer() ).html(
       '$ '+pageTotal +' ( $ '+ total +' total )'
    );
  }
})

調整colspan值以使總計與要統計的列對齊。