特別說明

使用Bootstrap-table分頁和彙總統計！

1. 我是自己模擬的JSON資料，用data接受，如果是從後臺url介面拿的的資料請用url接受
2. 設定bootstrapTable的js中 showFooter:true，這樣才能顯示錶格底部彙總欄
3. 在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": "glv",
			"score": 67
		},
		{
			"id": 5,
			"name": "郭留偉",
			"score": 100
		},
		{
			"id": 4,
			"name": "glv",
			"score": 67
		},
		{
			"id": 5,
			"name": "郭留偉",
			"score": 100
		}
	]
}
 

關鍵JS指令碼

//伺服器分頁顯示
$('#mytable').bootstrapTable('destroy').bootstrapTable({
	data: data.rows, //請求後臺的URL  url:"連線地址"
	method: 'get', //請求方式（*）
	toolbar: '#toolbar', //工具按鈕用哪個容器
	striped: true, //是否顯示行間隔色
	cache: false, //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*）
	pagination: true, //是否顯示分頁（*）
	sortable: true, //是否啟用排序
	sortOrder: "asc", //排序方式
	//queryParams: oTableInit.queryParams, //傳遞引數（*）
	sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
	pageNumber: 1, //初始化載入第一頁，預設第一頁
	pageSize: 10, //每頁的記錄行數（*）
	pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
	clickToSelect: true,
	showExport: true, //是否顯示匯出
	exportDataType: "basic", //basic', 'all', 'selected'.
	showFooter:true,
	
	columns: [{
		field: 'id',
		align: 'center',
		sortable: true,
		title: 'ID',
		footerFormatter: function (){
			return '彙總'
		}
	}, {
		field: 'name',
		align: 'center',
		title: '姓名',
		footerFormatter: function(){
			//統計總人數
			return data.rows.length;
		}
	}, {
		field: 'score',
		align: 'center',
		sortable: true,
		title: '分數',
		footerFormatter: function(){
			//統計總分數
			var count=0;
			$.each(data.rows, function(index,item) {
				count+=item.score;
			});
			return count;
			
		}
	}]
});
 

 效果圖