如需要Demo的朋友:点击打开链接
准备工作:
1.需要一个spingboot+mybatis环境,搭建步骤:点击打开链接,项目结构如下
2.控制器Controller关键代码
@ResponseBody
@RequestMapping("/getPage")
public Map<String,Object> getPage(@RequestParam(value = "limit", required = true) Integer limit,
@RequestParam(value = "offset", required = true) Integer offset){
return userService.getPage(limit,offset);
}
解析:其中limit,offset是bootstrap-table默认传到后台。offset为开始条,limit为条数
3.实现类Service关键代码
public Map<String,Object> getPage(Integer limit,Integer offset){
Map<String,Object> resultMap = new HashMap();
List<User> userList = null;
Integer total = 0;
try {
userList = userMapper.getpage(offset,limit);
total = userMapper.findAllCount();
}catch (Exception e){
e.printStackTrace();
}
resultMap.put("data",userList);
resultMap.put("total",total);
return resultMap;
}
4.接口层Mapper关键代码
@Mapper
public interface UserMapper {
List<User> getpage(@Param("stratRow") Integer stratRow, @Param("endRow") Integer endRow);
Integer findAllCount();
}
5.映射mapper.xml关键代码
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.example.demo.mapper.UserMapper">
<resultMap id="BaseResultMap" type="com.example.demo.model.User">
<result column="ID" property="id"/>
<result column="NAME" property="name"/>
<result column="SEX" property="sex"/>
<result column="AGE" property="age"/>
<result column="JOB" property="job"/>
</resultMap>
<select id="getpage" resultMap="BaseResultMap">
select * from user LIMIT #{stratRow},#{endRow}
</select>
<select id="findAllCount" resultType="java.lang.Integer">
select count(*) from user
</select>
</mapper>
6.前端页面关键代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-table使用</title>
<link rel="stylesheet" type="text/css" href="/bootstrap-table/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/bootstrap-table/bootstrap-table.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<table id="tb_departments"></table>
</body>
<script type="text/javascript">
$(function(){
var oTable = TableInit();
oTable.Init();
});
function TableInit() {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function() {
$('#tb_departments').bootstrapTable({
url: "/test/getPage",
pagination: true, //分页
search: false, //显示搜索框
sidePagination: "server", //服务端处理分页
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 5, //每页的记录行数(*)
responseHandler:function(res) {
return {
"total":res.total,//总页数
"rows": res.data //数据
}
},
columns: [
{
title: '序号',//标题 可不加
width:'64px',
align: 'center',
valign: 'middle',
formatter: function (value, row, index) {
return index+1;
}
},
{
title: '姓名',
field: 'name',
align: 'center',
valign: 'middle',
},
{
title: '性别',
field: 'sex',
align: 'center',
valign: 'middle',
},
{
title: '年龄',
field: 'age',
align: 'center',
valign: 'middle',
},
{
title: '工作',
field: 'job',
align: 'center',
valign: 'middle',
}
]
});
};
return oTableInit;
};
function selBycondition(){
var url = "/test/getPage?name=aaa";
$("#tb_departments").bootstrapTable('refresh',{'url':url});
}
</script>
</html>
解析:
responseHandler:function(res) { return { "total":res.total,//总页数 "rows": res.data //数据 } }
其中:total和data为后台controller返回的数据和总条数;最后selBycondtion方法为条件查询时,可以通过该方法重新加载表格。