pageHelper分页前端实现

前端框架

jquery+bootstrap+thymeleaf

后端Controller

/** * 跳转日志管理页面 * * @param model * @param pageNum 第几页 * @param pageSize 页大小 * @return */ @Log(module = "日志管理", operation = "查看操作日志列表") @RequiresPermissions("sys:log:log") @RequestMapping("/logList") public String logList(Model model, @RequestParam(defaultValue = "1", value = "pageNum") Integer pageNum, @RequestParam(defaultValue = "10", value = "pageSize") Integer pageSize) { PageInfo<SysLog> pageInfo = sysLogService.selectByPage(pageNum, pageSize); model.addAttribute("pageInfo", pageInfo); return prefix + "logList"; }

后端service

/** * 跳转日志管理页面 * * @param model * @param pageNum 第几页 * @param pageSize 页大小 * @return */ @Override public List<SysLog> selectByPage(Integer pageNum, Integer pageSize) { PageHelper.startPage(pageNum, pageSize); List<SysLog> list = sysLogMapper.selectAll(); PageInfo<SysLog> pageInfo = new PageInfo<>(list); return pageInfo; }

前端实现

先导入必要的jquery, bootstrap（css、js）

这里自定义了导航条按钮的一些样式

<style> .btn-page { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.2); padding: 5px 10px; } .btn-active { color: mintcream;/*字体*/ background-color: #0d69af;/*背景*/ border-color: #0d69af;/*边界*/ } </style>

具体代码如下：

<div class="row"> <div class="col-md-6"> 当前第[[${pageInfo.pageNum}]]页，共[[${pageInfo.pages}]]页，共[[${pageInfo.total}]]条记录 </div> </div> <!-- 分页导航条 --> <div class="pagenation"> <a th:href="@{/sys/log/}"><span class="btn-page btn-default">首页</span></a> <a th:href="@{/sys/log/(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}"><span class="btn-page btn-default">上一页</span></a> <-- 遍历导航页 --> <a th:each="page,pageStat:${pageInfo.navigatepageNums}" th:href="@{/sys/log/(pageNum=${page})}"> <span th:if="${page}==${pageInfo.pageNum}"> <span class="btn-page btn-active" th:text="${page}"></span> </span> <span th:if="${page}!=${pageInfo.pageNum}"> <span class="btn-page btn-default" th:text="${page}"></span> </span> </a> <-- 导航页 --> <a th:href="@{/sys/log/(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}"><span class="btn-page btn-default">下一页</span></a> <a th:href="@{/sys/log/(pageNum=${pageInfo.pages})}"><span class="btn-page btn-default">尾页</span></a> </div>

最终结果