PageHelper列表分页

PageHelper分页

技术

技术: SpringBoot + thymeleaf模板

效果图

分页前后效果图

引用依赖

引用pagehelper依赖, 这里使用的依赖是1.2.12

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.2.12</version>
</dependency>

修改controller

将修改原先的controller

原先的

@RequestMapping({
    
    "/", "/index"})
public String showAllUsers(Model model) {
    
    
    model.addAttribute("users", userService.showAllUsers());
    return "index";
}

修改后的

@RequestMapping({
    
    "/", "/index"})
public String showAllUsers(Model model, @RequestParam(defaultValue = "1", value = "pageNum") Integer pageNum) {
    
    
    PageHelper.startPage(pageNum, 3);
    List<User> users = userService.showAllUsers();
    PageInfo<User> userPageInfo = new PageInfo<>(users);
    model.addAttribute("users", userPageInfo);
    return "index";
}

使用了pageHelper插件, 将第一页都默认页, 每一页显示3行数据

修改前端网页

前端thymeleaf页面中

<tr th:each="item:${users}">
 <!--修改后的-->
<tr th:each="item:${users.list}">

添加一个点击分页页面

<!--分页-->
<div class="ui bottom attached segment m-opacity stackable grid">
    <div class="three wide column" align="center">
        <a class="item" th:href="@{/(pageNum=${users.hasPreviousPage}?${users.prePage}:1)}"
           th:unless="${users.isFirstPage}">上一页</a>
    </div>

    <div class="ten wide column" align="center">
        <p><span th:text="${users.pageNum}"></span> / <span th:text="${users.pages}"></span></p>
    </div>

    <div class="three wide column" align="center">
        <a class="item"
           th:href="@{/(pageNum=${users.hasNextPage}?${users.nextPage}:${users.pages})}"
           th:unless="${users.isLastPage}">下一页</a>
    </div>
</div>

完成 !

更多的操作可以点击PageInfo.java查看