快速上手:
只需要配置HTML，js ，controller以及持久化层的分页查询。
html
- 引入相关js
- 添加table标签 放body里
放入table标签
js
- 添加bootstrap组件(这里用最简单的，后续若有复杂样式，请看官网API)
//bootstrapTable组件
$('#mytab1').bootstrapTable({
method : 'get',
url : "../getPage/queryChampionsDate1",//请求路径
striped : false, //是否显示行间隔色
pageNumber : 1, //初始化加载第一页
pagination : true,//是否分页
sidePagination : 'server',//server:服务器端分页|client：前端分页
pageSize : 10,//单页记录数
pageList : [ 5, 10, 20, 30 ,50],//可选择单页记录数
showRefresh : true,//刷新按钮
queryParams : function(params) {//上传服务器的参数
var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
limit : params.limit, // 每页显示数量
offset : params.offset, // SQL语句起始索引
STAFF_ID : $("#staffId").val(),
STAFF_NAME : $("#userName").val(),
MOBILE:$("#MOBILE").val()
};
return temp;
},
columns : [ {
field: "state",
checkbox: true,
align: 'center',
}, {
title : '姓名',
field : 'name',
//sortable : true
} ]
});
对比前端分页这里变更的内容不多如下图
image.png
其中 下边内容是必须的
limit : params.limit, // 每页显示数量
offset : params.offset, // SQL语句起始索引
controller
-获取前台数据 （dao层代码省略）
/**
* 数据请求
* @param request
* @return
*/
@RequestMapping("/queryChampionsDate1")
@ResponseBody
public JSONObject queryChampionsDate1(HttpServletRequest request, HttpServletResponse response){
JSONObject res = new JSONObject();
JSONArray resArray = new JSONArray();
//id 姓名 属性 联系电话 商盟地址 创建日期
for (int i = 0; i<10 ;i++){
JSONObject resIndex = new JSONObject();
resIndex.put("name","李四端"+i);
resArray.add(resIndex);
}
res.put("total",33);
res.put("rows",resArray);
return res;
}
有这些代码可见，
共33条，每页10条，页面会分4页如下图
image.png
其中 controller层返回是必须是带有total和rows的json串
res.put("total",33);
res.put("rows",resArray);
拓展：一般公司中前后台传值不会是这种，大部分都是带有编码的自定义的返回值，这时候怎么办？
- 如下格式
{
"CODE": "0000",
"DATA": {
"TOTAL": 4,
"PAGE_INDEX": 0,
"PAGE_SIZE": 4,
"LEADER_INFO": [
{
"STAFF_ID": "hasc-yangsq17",
"STAFF_NAME": "张三",
"MOBILE": "13288888888"
},
{
"STAFF_ID": "ha-zhangmeng16",
"STAFF_NAME": "张三",
"MOBILE": "13288888888"
}
]
},
"DESC": "调用成功"
}
bootstrap-table提供了处理这种数据responseHandler的方法。
- 处理上述数据(res用来接收controller传来的json串)
//对返回数据加工
responseHandler: function(res) {
if("0000"==res.CODE){
return {
"total": res.DATA.TOTAL,//总页数
"rows": res.DATA.LEADER_INFO //数据
};
}else {
alert(res.DESC);
return {
"total": 0,//总页数
"rows": [] //数据
};
}
},
处理完毕！
bootstrap-table服务端分页插件可接受的返回值为带有total和rows的json串，所以要使用bootstrap-table服务端分页插件，就必须处理数据格式为带有total和rows的json串。
前端分页
SSM整合dome（使用idea搭建maven项目返回前台json串）
)