前后端分页实现（分页插件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
微信公众号：代码之家/源码客栈