pageHelper配合前端插件实现分页

前端分页插件

jqueryPagination

下载链接：http://www.jq22.com/jquery-info15113

后端Controller:

@RequestMapping("/userList")
public String userList(Model model, @RequestParam(defaultValue = "1", value = "pageNum") Integer pageNum, @RequestParam(defaultValue = "5", value = "pageSize") Integer pageSize) {
       
        PageInfo<User> pageInfo = userService.selectByPage(pageNum, pageSize);
        model.addAttribute("pageInfo", pageInfo);

        return prefix+"userList";
    }

后端Service:

 @Override
    public List<User> selectByPage(Integer pageNum, Integer pageSize) {

        PageHelper.startPage(pageNum, pageSize);
        List<User> users = userMapper.selectAll();
        PageInfo<User> pageInfo = new PageInfo<>(users);

        return pageInfo 
    }

前端页面：

首先导入相关的引用文件；如：jquery，分页的css、js。

<link rel="stylesheet" href="css/jquery.pagination.css" />
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.pagination.min.js"></script>
<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				font-family: "微软雅黑";
				background: #eee;
			}
			
			button {
				display: inline-block;
				padding: 6px 12px;
				font-weight: 400;
				line-height: 1.42857143;
				text-align: center;
				vertical-align: middle;
				cursor: pointer;
				border: 1px solid transparent;
				border-radius: 4px;
				border-color: #28a4c9;
				color: #fff;
				background-color: #5bc0de;
				margin: 20px 20px 0 0;
			}
			
			.box {
				width: 900px;
				margin: 100px auto 0;
				height: 34px;
			}
			
			.page {
				width: 700px;
			}
			
			.info {
				width: 200px;
				height: 34px;
				line-height: 34px;
			}
			
			.fl {
				float: left;
			}
		</style>

注意：可以将样式移动到 jquery.pagination.css文件中，不用每个页面都有这一段代码，别影响代码的阅读性。

具体前端代码：

<p>当前 <span th:text="${pageInfo.pageNum}"></span> 页,总 <span
                                        th:text="${pageInfo.pages}"></span> 页,共 <span
                                        th:text="${pageInfo.total}"></span> 条记录</p>
<--分页导航-->
                                <div>
                                    <div id="pagination" class="page fl"></div>
                                </div>

配合一段js脚本初始化分页导航条

<script>
    $(document).ready(function () {

    /** 分页 */
            var pageNum = [[${pageInfo.pageNum}]];
            var pages = [[${pageInfo.pages}]];
            var pageSize = [[${pageInfo.pageSize}]];
            $("#pagination").pagination({
                currentPage: pageNum,
                totalPage: pages,
                callback: function (current) {
                    location.href = "/sys/user/?pageNum="+current;
                }
            });

});
</script>

最后通过前端调试，修改一下分页导航条的布局（一般靠右）就大功告成了。

最后附上前端图片：