bootstrap table 实现前端分页

bootstrap table 实现前端分页

$('#vTableDataTable').bootstrapTable({

	//请求方法
	method: 'post',
	//类型json
	dataType: "json",
	contentType: "application/x-www-form-urlencoded",
	//显示检索按钮
	// showSearch: false,
	//显示刷新按钮
	// showRefresh: true,
	//显示切换手机试图按钮
	// showToggle: true,
	//显示 内容列下拉框
	// showColumns: false,
	//显示到处按钮
	// showExport: true,
	//显示切换分页按钮
	// showPaginationSwitch: true,
	//最低显示2行
	minimumCountColumns: 2,
	// smartDisplay: false,
	//是否显示行间隔色
	striped: true,
	sortName: 'lastTime',
	sortOrder: 'desc',
	// rightFixedColumns: true, //右侧冻结列
	// rightFixedNumber: 1,
	//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性(*)
	// cache: false,
	//是否显示分页(*)
	pagination: true,
   //分页方式: client客户端分页，server服务端分页(*)
	sidePagination: "client",
	//排序方式
	// sortOrder: "asc",
	//初始化加载第一页，默认第一页
	pageNumber:1,
	//每页的记录行数(*)
	pageSize: 10,
	//可供选择的每页的行数(*)
	pageList: [10, 25, 50, 100],
	//这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
	url: "${ctx}/dac/tTagCfgTpl/getSssjBytplName?tplName="+tplName+"&code="+likeCodeSs,
	queryParams : function(msg) {//上传服务器的参数
		var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
			// limit : params.limit, // 每页显示数量
			// offset : params.offset, // SQL语句起始索引
			//name: $("#name").val(),//按条件搜索
		};
		return temp;
	},
	// onShowSearch: function () {
	// 	$("#import-collapse").hide();
	// 	$("#search-collapse").fadeToggle();
	// },
	columns: cols
	,onPageChange: function (number, size){
		// alert(($(".page-size").text())*41+55+" "+$(document.body).outerHeight(true));
		if((($(".page-size").text())*32+45)>($(document.body).outerHeight(true)-220)){
			$(".jp-table-body").css("height", $(document.body).outerHeight(true) -220+ "px");
		}else{
			$(".jp-table-body").css("height", ($(".page-size").text())*32+45 + "px");
		}


	}
});

其实前端分页很简单，只需将上边的分页方式改为client
//分页方式: client客户端分页，server服务端分页(*)
sidePagination: “client”,
其中需要注意的是，前端分页所需要的json格式与服务器端分页所需的json格式不同。
前端分页：
sidePagination: “client”，
对应的json格式必须为：
[
{
“id”:1,
“name”:“张三”,
“age”:22
},
…
]

服务器分页：
sidePagination: “server”，
对应的json格式必须为：
{
“total”:20,
“rows”:[
{
“id”:1,
“name”:“张三”,
“age”:22
},
…
]
}