Java后端PageHelper，Vue前端分页组件实现分页实例

PageHelper

Java后端：

注：如果一个方法里面有很多查询语句，PageHelper.startPage(pageNum, pageSize);要挨着你要分页的语句

1.如果要查询的实体类和返回的对象是同一个实体类就用这种方式

public PageInfo<A> queryToCancelTransV2(String userId,Integer pageNum, Integer pageSize) throws ParseException {
	if (pageSize != null && pageNum != null) {
		PageHelper.startPage(pageNum, pageSize);
	}
	List<A> aList = xxxService.queryToCancelInfoByUserId(userId);
	PageInfo<A> pageInfo = new PageInfo<A>(aList);
	return pageInfo;
}

2.如果要查询的实体类和返回的对象不是同一个实体类就用这种方式

public PageInfo<A> queryToCancelTransV2(String userId,Integer pageNum, Integer pageSize) throws ParseException {
	// A是要返回的VO
	List<A> aList = new ArrayList<>();
	PageInfo<A> resPageInfo = null;
	if (pageSize != null && pageNum != null) {
		PageHelper.startPage(pageNum, pageSize);
	}
	// B是实体类
	List<B> bList = xxxService.queryToCancelInfoByUserId(userId);
	PageInfo<B> bPageInfo = new PageInfo<>(bList);
	resPageInfo = pageInfo2PageInfoVo(bPageInfo);
	resPageInfo.setList(aList)
	return resPageInfo;
}

public static <P, V> PageInfo<V> pageInfo2PageInfoVo(PageInfo<P> pageInfoPo) {
	// 创建Page对象，实际上是一个ArrayList类型的集合
	Page<V> page = new Page<>(pageInfoPo.getPageNum(), pageInfoPo.getPageSize());
	page.setTotal(pageInfoPo.getTotal());
	return new PageInfo<>(page);
}

 maven配置文件pom.xml 引入依赖：

	<dependency>
		<groupId>com.github.pagehelper</groupId>
		<artifactId>pagehelper</artifactId>
		<version>5.1.11</version>
		<scope>compile</scope>
	</dependency>

 Vue前端：

	<!--分页组件-->
	<div class="qy_table_wrap_pagination">
		<el-pagination
			align='center'
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page.sync="pageNum"
			:page-sizes="[5, 10]"
			:page-size.sync="pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total">
		</el-pagination>
	</div>
<script>
    export default {
        name: "qyCancel",

	data() {
		return {
			tableData:[]
			pageNum: 1,
			pageSize: 10,
			total: 0,
			userId:''
			   }
		}
	methods: {
        //改变每页显示多少条数时触发，再调一遍接口
		handleSizeChange(val) {
			this.pageSize = val;
			this.pageNum = 1;
			this.getQyCancelList();
			console.log(`每页 ${val} 条`);
		},
        //改变当前下标页的时触发，再调一遍接口
		handleCurrentChange(val) {
			this.getQyCancelList();
			console.log(`当前页: ${val}`);
			//主要 axios
		},
	getQyCancelList(flag){
		this.$axios.post('/xxx/approval/queryToCancelTrans/nyk',
			{
				userId:userId,
				pageSize: this.pageSize,
				pageNum: this.pageNum,
			},
			{
				headers:{"Content-Type": "application/json"}
			}).then((res)=>{
				console.log(1231312,res.data)
				if (res.success){
					this.tableData = res.data.list;
					this.total = res.data.total;
					this.loading = false;
				}else {
					this.tableData = [];
					this.loading = false;
					this.$message.warning(res.errMsg);
				}
			}).catch((e)=>{
				this.loading = false;
				console.log(e)
				this.lists = [];
			})
		}
	}
}
</script>

配置参数详见Elem: https://element.eleme.cn/#/zh-CN/component/pagination

---