- LayUi 官网 https://www.layui.com/doc/
准备工作
首先想做分页必须了解
前台发什么数据：当前页码，一页显示多少条
后台给什么数据：给你当前页数据，一共多少条
后端
- 项目技术SpringBoot
- 包结构
model （po）数据库表对应实体类
mapper 接口，实现类，针对表实际操作，service 服务层
controller 控制层
具体实现
- model 首先写实体类并且生成get和set方法，toString
private Integer id;
private String username;
private String password;
- mapper 接口首先知道数据总数和，写实现类sql语句
@Mapper
加Mapper注解或者加入到启动类上二选一
@MapperScan(basePackages = "com.example.demo.mapper")
有2个参数为了区分加个@Param
/**
* 返回分页用户数据
* @param pageIndex 从哪查（索引）
* @param pageSize 查几条(一页显示5条)
* @return
*/
/*查询用户数据*/
public List<User> getPageUserinfo(@Param("index") Integer pageIndex,@Param("size") Integer pageSize);
/*查询总数*/
public int totalUserCount();
- 因为用户数据和查询总数一起给前台，所以，请求一个接口得到2个数据
还得封装一个实体类
private List<User> list; // 查询页的数据
private Integer total; // 总数
- service 里面注入一个dao
因为分页是一个业务在一个方法里面写，
@Autowired
UserMapper userMapper;
public PageRespBean getPageInfo(Integer index,Integer size) {
//调一个分页总数
int totalUserCount = userMapper.totalUserCount();
// 分页传过来的是页码，必须经过处理(1-1)*10 0,10 10,10 20,10
List<User> pageUserinfo = userMapper.getPageUserinfo((index-1)*size, size);
PageRespBean pageRespBean = new PageRespBean<User>();
pageRespBean.setList(pageUserinfo);
pageRespBean.setTotal(totalUserCount);
return pageRespBean;
- 服务层
@Autowired
UserService userService;
@GetMapping("/user/pageInfo")
//跨域 @CrossOrigin（"*"）
@CrossOrigin
public PageRespBean getUserInfo(@RequestParam(value="pageIndex",defaultValue = "1") Integer pageIndex,@RequestParam(value="pageSize",defaultValue = "10") Integer pageSize) {
return userService.getPageInfo(pageIndex,pageSize);
}
优化
泛型，可以在类上用
然后传一个泛型
public class PageRespBean<T> {
private List<T> list; // 查询页的数据
PageRespBean pageRespBean = new PageRespBean<User>();
在servlet上，优化给分页默认值
/@RequestParam(value="pageIndex",defaultValue = "1") 给默认值/跨域
@CrossOrigin时间
/对象写成json数据时候这个注解会生效，/
@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
/@JsonFormat(pattern = "yyyy-MM-dd",timezone = "Asia/Shanghai")/前台代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!--数据-->
<div id="data"></div>
<!--分页页码-->
<div id="test1"></div>
<script src="../layui/layui.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*分页函数，axios*/
/*https://www.runoob.com/vue2/vuejs-ajax-axios.html*/
let getPageInfo = (url,params) => {
return axios({
method: 'get',
url: url,
params: params,
//个人感觉下面加不加都行！！
//json key values
transformRequest:[function (data) {
let ret = '';
for (let i in data){
//pageIndex=1&pagesize=10&
ret += encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'
}
return ret;
}],
header : {
'Content-Type':'application/xxx-w-form-urlencoded'
}
})
}
<!--分页页码-->
getPageInfo('http://localhost:8833/user/pageInfo').then(resp => {
console.log(resp.data);// 总数和数据
let count = resp.data.total;
//第一次渲染
myRender(resp.data);
layui.use('laypage', function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号（分页页码）
,count: count //数据总数，从服务端得到
//当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
,jump: function(obj, first){
//首次不执行
if(!first){
let datas = {
"pageIndex":obj.curr,//得到当前页，以便向服务端请求对应页的数据。
"pageSize":obj.limit//得到每页显示的条数
};
//第二次渲染数据
getPageInfo('http://localhost:8833/user/pageInfo',datas).then(resp2 => {
console.log(resp2.data);
myRender(resp2.data);
})
}
}
});
});
})
//数据
function myRender(data) {
let list = data.list;
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#data'
,height: 312
,page: false //开启分页
,data:list
,cols: [[ //表头
{field: 'id', title: 'ID', width:180,fixed: 'left'}
,{field: 'username', title: '用户名', width:180}
,{field: 'password', title: '密码', width:180}
,{field: 'birthday', title: '生日', width:180}
]]
});
});
}
</script>
</body>
</html>
