背景
表格数据分页时,前端分页要做的就是尽快接受数据并最快地展示给用户,对于数据不多的场景用前端实现也无妨。但是当数据多的时候,前端进行分页操作,就得先把成千上万的数据全部先扒拉下来,才能进行操作展示数据。该操作不仅拉低性能,而且扒拉数据也很费时间(等待数据加载时间长)。故一般对于数据量大的操作采用后端分页
原理
每次点击下一页,前端只需发送分页数信息(当前页、页数据条数)请求后端数据。后端根据前端发送的信息使用pagehelper插件配合分页。
代码
1、导入依赖
<!--分页插件-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.2</version>
</dependency>
2、spring配置分页插件
<!-- 配置分页插件-->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
<property name="properties">
<props>
<prop key="helperDialect">mysql</prop>
<!-- 到达第一页或最后一页不会溢出-->
<prop key="reasonable">true</prop>
</props>
</property>
</bean>
</array>
</property>
3、添加分页接口方法
dao层无需修改,在service层添加分页方法getByPage,参数为pageNum(当前页数)和pageSize(每页数据条数),后面map是我的模糊查询条件,可忽略。
/**
*使用分页
**/
PageInfo<Goods> getByPage(Integer pageNum, Integer pageSize, Map map);
service层对应的接口实现类,与之前未使用分页的调用的dao层方法一致,将pagehelper插入查询方法前,插件自动实现分页效果,返回结果封装在PageInfo里面。
@Override
public PageInfo<Goods> getByPage(Integer pageNum, Integer pageSize,Map map) {
PageHelper.startPage(pageNum,pageSize);
List<Goods> list=goodsDao.selectByConditions(map);
PageInfo<Goods> pageInfo=new PageInfo<>(list);
return pageInfo;
}
4、控制层方法
调用前面service层的方法getByPage,从map中获取分页当前页数和每页数据条数入参,
//分页查询
@PostMapping("/getGoodsByPage")
public Result getByPage(@RequestBody Map<String ,Object> map){
// System.out.println("selectGoods\n"+map);
Integer pageNum= (Integer) map.get("pageNum");
Integer pageSize= (Integer) map.get("pageSize");
Map<String,Object> search= (Map<String, Object>) map.get("search");
System.out.println(search);
PageInfo<Goods> list= goodsService.getByPage(pageNum,pageSize,search );
boolean success=list!=null;
Integer code=success ? Code.GET_OK : Code.GET_ERR;
String msg=success ? "查询成功!":"查询失败";
return new Result(list,code,msg,success);
}
5、分页数据格式
6、前端
table里面data绑定表格数据goodsTableData,在axios访问ssm控制层时,为表格数据赋值。
监听分页
采用属性监视方法,一旦pageNum或pageSize改变,重新查询数据
前端完整代码
<template>
<div>
<!-- table 数据 -->
<el-row>
<el-col :span="24">
<el-table
:data="goodsTableDate"
:header-cell-style="{ background: '#D9ECFF', color: 'black' }"
stripe
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column prop="id" label="id" sortable width="60">
</el-table-column>
//表格其他列,略。。。
<el-table-column prop="supplier" label="供货商"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-col>
</el-row>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
goodsTableDate: [],//表格数据
search: {//搜索数据
name: "",
type: "",
batch: "",
state: "",
},
pageNum:1,
pageSize:5,
total:100,
};
},
mounted() {
this.selectByConditions();
},
//采用属性监视,当点击上一页下一页或切换页数据条时,重新查询数据
watch:{
pageNum:{
immediate:false,//初始化时让handle不调用
handler(newValue,oldValue){
this.selectByConditions();
}
},
pageSize:{
immediate:false,//初始化时让handle不调用
handler(newValue,oldValue){
this.selectByConditions();
}
}
},
methods: {
//显示表格内容
selectByConditions() {
let getSearch={
//第几页
pageNum:this.pageNum,
//每页数据条数
pageSize:this.pageSize,
//我的查询条件,可忽略
search:this.search
}
axios
.post("/getGoodsByPage", getSearch)
.then((res) => {
console.log(res.data.data)
//总数据条数
this.total=res.data.data.total
//表格数据赋值,
this.goodsTableDate = res.data.data.list;
})
.catch((error) => {
this.$message.error("错误");
});
},
//该方法监视当前页数
handleSizeChange(val) {
this.pageSize=val
console.log(`每页 ${val} 条`);
},
//该方法监视每页数据条数
handleCurrentChange(val) {
this.pageNum=val
console.log(`当前页: ${val}`);
},
},
};
</script>
<style scoped>
7、结果