如何在引导表页脚中添加多行？答案

【问题标题】：How to add multiple row in bootstrap-table footer?如何在引导表页脚中添加多行？
【发布时间】：2021-06-14 13:31:11
【问题描述】：

我需要在表格页脚中显示特定列的所有计数。

但很遗憾，我找不到任何关于此问题的文档。

知道如何实现吗？

请参阅下面的图片以供参考：

Current Output

Expected Output

谢谢。

【问题讨论】：

标签： javascript html twitter-bootstrap html-table bootstrap-table

【解决方案1】：

您可以使用 jQuery DataTable plugin 来实现这一点。它有类似的example here

【讨论】：

对于自定义方法，您可以查看此jQuery-Bootstrap

【解决方案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 值，使总数与您要统计的列对齐。

【讨论】：