BootStrap-Table

1、加载table数据

详细属性如下：

//加载table数据
$('#my_table').bootstrapTable({
	method: 'get',
	url: "/change/getchange",
	height: tableHeight(),	//高度调整
	//toolbar: '#toolbar',
	striped: true,	//是否显示行间隔色
	pageNumber: 1,	//初始化加载第一页，默认第一页
	pagination: true,	//是否分页
	queryParamsType: 'limit',	//设置为 'limit'，则会发送符合 restful 格式的参数。
	/*请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果 queryParamsType = 'limit' ,返回参数必须包含
	limit, offset, search, sort, order 否则, 需要包含: 
	pageSize, pageNumber, searchText, sortName, sortOrder. 
	返回false将会终止请求。*/
	queryParams: queryParams,	//
	sidePagination: 'server',	//设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置服务器数据地址（url）或者重写ajax方法。
	pageSize: 20,	//单页记录数
	pageList: [5, 10, 20, 100],	//分页步进值
	//showRefresh: true,	//刷新按钮
	//showColumns: true,	//是否显示内容列下拉框。
	clickToSelect: true,	//是否启用点击选中行
	//toolbarAlign: 'right',	//指定 toolbar 水平方向的位置。'left' 或 'right'。
	buttonsAlign: 'right',	//按钮对齐方式
	//toolbar:'#toolbar',	//指定工作栏
	columns:[
		{
			title: '参数名称',
			field: 'id'
		},
		{
			title: '参数修改后值',
			field: 'now',
			//visible:false
		},
		{
			title:'参数修改前值',
			field:'before',
		},
		{
			title:'修改时间',
			field:'date',
		}
	],
	locale: 'zh-CN',	//中文支持,
	onLoadSuccess: function(){  //加载成功时执行
		console.info("加载成功");
	},
	onLoadError: function(){  //加载失败时执行
		console.info("加载数据失败");
	},
	responseHandler: responseHandler	//处理服务器返回的数据
})

更多详细属性见官网：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

在加载之前必须先销毁表格，因为不添加销毁，只会在第一次加载表格，之后的请求都不会生效：

//加载之前先销毁table，否则除了第一次加载都会出问题
$("#my_table").bootstrapTable('destroy'); 

2、高度和参数以函数的方式传递

高度函数：

//根据窗口调整表格高度
$(window).resize(function() {
	$('#my_table').bootstrapTable('resetView', {
		height: tableHeight()
	})
})

//表格高度
function tableHeight() {
	return $(window).height() - $("#zyy_div").outerHeight(true);
}

参数函数：

//请求服务数据时所传参数
function queryParams(params) {
	return{
		pageSize: params.limit,	//每页的条数
		pageIndex: params.offset / params.limit + 1,	//偏移量 / 每业条数 + 1 得出页数 
		batch: curBatchCode,
		unit: curUnitCode
	}
}

3、处理服务器返回数据

处理服务器返回数据：

//处理服务器返回的数据，data是服务器返回的数据
function responseHandler(data) {
	if(data.msg == 'success') {
		return data.data;
	} else {
		return data;
	}
}

服务器返回的json格式：

{
	"code": "200",
	"msg": "success",
	"data": {
		"total": 4452,
		"rows": [
			{
				"id": "PID1_热风温度_设定",
				"now": "80.0",
				"before": "70.0",
				"date": "2018-07-09 08:51:46"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "79.958336",
				"before": "80.0",
				"date": "2018-07-09 09:23:06"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "79.541695",
				"before": "79.958336",
				"date": "2018-07-09 09:23:16"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "79.12505",
				"before": "79.541695",
				"date": "2018-07-09 09:23:26"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "78.70841",
				"before": "79.12505",
				"date": "2018-07-09 09:23:36"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "78.29177",
				"before": "78.70841",
				"date": "2018-07-09 09:23:46"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "77.87513",
				"before": "78.29177",
				"date": "2018-07-09 09:23:56"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "77.45849",
				"before": "77.87513",
				"date": "2018-07-09 09:24:06"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "77.04185",
				"before": "77.45849",
				"date": "2018-07-09 09:24:16"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "76.625206",
				"before": "77.04185",
				"date": "2018-07-09 09:24:26"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "76.208565",
				"before": "76.625206",
				"date": "2018-07-09 09:24:36"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "75.79192",
				"before": "76.208565",
				"date": "2018-07-09 09:24:46"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "75.37528",
				"before": "75.79192",
				"date": "2018-07-09 09:24:56"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "74.95864",
				"before": "75.37528",
				"date": "2018-07-09 09:25:06"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "74.542",
				"before": "74.95864",
				"date": "2018-07-09 09:25:16"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "74.12536",
				"before": "74.542",
				"date": "2018-07-09 09:25:26"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "73.70872",
				"before": "74.12536",
				"date": "2018-07-09 09:25:36"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "73.292076",
				"before": "73.70872",
				"date": "2018-07-09 09:25:46"
			},
			{
				"id": "PID1_热风温度_设定",
				"now": "72.875435",
				"before": "73.292076",
				"date": "2018-07-09 09:25:56"
			}
		]
	}
}

data里的json即是bootstrap-table所需的json格式。