前后端分页实现（分页插件PageHelper）

1.前言

前后端分页是一件相对困难的事情，因此我会将分页的详细实现方法分享给大家。 2.后端Java代码实现

2.1 controller层代码

@RequestMapping(value = "/getAlltoUser") private String getList1(Model model,@RequestParam(required = false, defaultValue = "1", value = "pageNum") Integer pageNum, @RequestParam(defaultValue = "8", value = "pageSize") Integer pageSize){ // 为了程序的严谨性，判断非空： if (pageNum == null) { pageNum = 1; // 设置默认当前页 } if (pageNum <= 0) { pageNum = 1; } if (pageSize == null) { pageSize = 8; // 设置默认每页显示的数据数 } PageHelper.startPage(pageNum, pageSize); List<Commodity> page = commodityServiceImp.getAllCommodity(); // 使用PageInfo包装查询后的结果,5是连续显示的条数,结果list类型是Page<E> PageInfo<Commodity> pageInfo = new PageInfo<Commodity>(page, pageSize); // 清理 ThreadLocal 存储的分页参数,保证线程安全 PageHelper.clearPage(); model.addAttribute("pageInfo", pageInfo); return "front/AllCommodity"; }

2.2 service层代码

public List<Commodity>getAllCommodity() { List<Commodity> commodities = commodityMapper.selectAll(); return commodities; }

3.前端代码实现

不论是在网站的前台页面和网站的管理员后台表格，这个前端分页都可以实现分页查询。 需要注意的是 1.href中的方法名需要变换为你自己的； 2.这个分页前端的class="modal-footer no-margin-top"用的是bootstrap.min.css, 这个前端框架网上还是比较多的，大家可以看其他人的。

<!--显示分页信息--> <div class="modal-footer no-margin-top"> <div class="col-md-6">当前第 [${pageInfo.pageNum}]页,共 [${pageInfo.pages}] 页.一共 [${pageInfo.total}]条记录</div> <ul class="pagination pull-left no-margin" > <li th:if="${pageInfo.hasPreviousPage}"><a href="getAlltoUser.do?pageNum=1">首页</a></li> <li class="prev" th:if="${pageInfo.hasPreviousPage}"><a href="getAlltoUser.do?pageNum=${pageInfo.prePage}"> 上一页 </a></li> <li class="next" th:if="${pageInfo.hasNextPage}"><a href="getAlltoUser.do?pageNum=${pageInfo.nextPage}"> 下一页 </a></li> <li><a href="getAlltoUser.do?pageNum=${pageInfo.pages}">尾页</a></li> </ul> </div>

4.总结

本次的前后端分页查询，后端使用了PageHelper插件，前端使用了bootstrap框架，用这两个相结合实现了前后端分页。 大家有困惑的地方可以联系我，大家共同探讨，共同进步。

QQ：2151995010 微信公众号：代码之家/源码客栈