举例分页:每页显示5条数据。
1、
查询 第1页: pageNum=1 pageSize=5.
(pageNum-1)*pageSize = 该页的起始位置
(1-1)*5 =0 ——> limit 0,5
0: 从第1个数据开始 。
5: 每页有5个数据。
select * from sys_user limit 0,5
2、
查询 第2页: pageNum=2 pageSize=5.
(pageNum-1)*pageSize = 该页的起始位置
(2-1)*5 =5 ——> limit 5,5
5: 从第6个数据开始 。
5: 每页有5个数据。
select * from sys_user limit 5,5
3、
查询 第3页: pageNum=3 pageSize=5.
(pageNum-1)*pageSize = 该页的起始位置
(3-1)*5 =10 ——> limit 10,5
10: 从第11个数据开始 。
5: 每页有5个数据。
select * from sys_user limit 10,5
4、简洁代码仅便于理解
template:
<template>
<div>
<div style="margin: 10px 0">
<el-button type="primary" @click="load">搜索</el-button>
</div>
<div>
<el-table
:data="tableData">
<!-- 页面表格 -->
</el-table>
</div>
<div style="padding: 10px 0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
script: 当然可用axios
export default {
data(){
return{
pageNum:1,
username:'',
pageSize:5,
total:0,
tableData:[],
}
},
methods:{
load() {
// fetch("http://localhost:9090/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&username=" + this.username)
// .then(res => res.json()).then(res => {
// this.tableData = res.data //数据显示在页面
// this.total = res.total
// })
request.get("http://localhost:9090/user/page" ,{
params:{
pageNum: this.pageNum,
pageSize: this.pageSize,
username: this.username
}
}).then(res=>{
this.tableData = res.records;
this.total = res.total;
})
},
handleSizeChange(pageSize) {
this.pageSize = pageSize
this.load()
},
handleCurrentChange(pageNum) {
this.pageNum = pageNum
this.load()
}
},
created(){
this.load();
}
}
controller:
没有用service。
@GetMapping("/page")
public Map<String, Object> findPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize,
@RequestParam String username) {
pageNum = (pageNum - 1) * pageSize;//该页的起始位置
username = "%" + username + "%";
List<User> data = userMapper.selectPage(pageNum, pageSize, username);
Integer total = userMapper.selectTotal(username);
Map<String, Object> res = new HashMap<>();
res.put("data", data);
res.put("total", total);
return res;
}
mapper:
@Select("select * from sys_user where username like #{username} limit #{pageNum}, #{pageSize}")
List<User> selectPage(Integer pageNum, Integer pageSize, String username);
//根据username 进行模糊查询
@Select("select count(*) from sys_user where username like concat('%', #{username}, '%') ")
Integer selectTotal(String username);