Bootstrap-table分页+汇总统计

最新推荐文章于 2023-01-09 15:36:04 发布

GuoLiuV

最新推荐文章于 2023-01-09 15:36:04 发布

阅读量9.8k

点赞数 2

分类专栏： Bootstrap-table Bootstrap

本文链接：https://blog.csdn.net/qq_37641182/article/details/81390342

版权

这篇博客介绍了如何在Bootstrap-table中实现分页和汇总统计功能。通过设置`showFooter: true`来显示底部汇总栏，并在columns中添加`footerFormatter`属性以展示统计数据。博主还分享了模拟的JSON数据格式和关键JS脚本，帮助读者理解实现过程。

摘要由CSDN通过智能技术生成

特别说明

使用Bootstrap-table分页和汇总统计！

我是自己模拟的JSON数据，用data接收，如果是从后台url接口拿的的数据请用url接受
设置bootstrapTable的js中 showFooter:true，这样才能显示表格底部汇总栏
在columns加入: footerFormatter 属性即可

JSON数据格式

{
	"total": 11,
	"rows": [{
			"id": 1,
			"name": "guoliuwei",
			"score": 95
		},
		{
			"id": 2,
			"name": "glw",
			"score": 90
		},
		{
			"id": 3,
			"name": "果粒橙",
			"score": 85
		},
		{
			"id": 4,
			"name": "glv",
			"score": 67
		},
		{
			"id": 5,
			"name": "郭留伟",
			"score": 100
		},
		{
			"id": 2,
			"name": "glw",
			"score": 90
		},
		{
			"id": 3,
			"name": "果粒橙",
			"score": 85
		},
		{
			"id": 4,
			"name&#