首页 > Bootstrap表格插件Bootstrap Table配置教程 > bootstrap table showFooter显示隐藏表格底部

bootstrap table showFooter显示隐藏表格底部

bootstrap table showFooter显示和隐藏表格底部,showFooter设置ture显示,设置false隐藏,默认值为false不显示。这个属性通常用配合列的footerFormatter属性来做统计行用,比如数量合计多少多少。

方法一在html中使用

<table id="table" data-show-footer="false"></table>

方法二在JS中使用

$('#table').bootstrapTable({
     columns: columns,
     data: data,
     showFooter:true //显示表格底部
 });

配合footerFormatter来显示当前表格有多少行数据

//在列中设置footerFormatter属性 by itxst.com
var columns = [
  {
    "field": "Id",
    "title": "编号"
  },
  {
    "field": "ProductName",
    "title": "产品名称"
  },
  {
    "field": "StockNum",
    "title": "Item 库存",
    "footerFormatter": "stockNumFormatter"
  }
];
//自定义统计函数
function stockNumFormatter(data) {
  return "总计:"+data.length
};
//显示底部行
$('#table').bootstrapTable( {
  columns: columns,
  data: data,
  showFooter: true, //显示隐藏底部
});

在线试一试