springboot、thymeleaf实现分页

page.html代码

展示数据页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
</head>
<body>
<div align="center">
    <table border="1">
        <tr>
            <th>用户编号</th>
            <th>用户密码</th>
            <th>用户名</th>
            <th>日期</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
        <tr th:each="user:${users}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.password}"></td>
            <td th:text="${user.username}"></td>
            <td th:text="${user.regDate}"></td>
            <td th:text="${user.address.addressInfo}"></td>
            <td>
                <a th:href="@{/updateuser.html(id=${user.id})}">修改</a>
                <a onclick="return confirm('确定删除吗？')" th:href="@{/deleteuser.html(id=${user.id})}">删除</a>
            </td>
        </tr>
    </table>
    <div class="modal-footer no-margin-top">
        <ul class="pagination pull-right no-margin">

            <!-- 首页 -->
            <li>
                <a th:href="'/page.html?pageNum=0'">首页</a>
            </li>

            <!-- 上一页 -->
            <li th:if="${users.hasPrevious()}">
                <a th:href="'/page.html?pageNum=' + ${users.previousPageable().getPageNumber()}" th:text="上一页"></a>
            </li>

            <!-- 中间页 -->
            <li th:each="pageNum:${#numbers.sequence(0, users.getTotalPages() - 1)}">
                <a th:href="'/page.html?pageNum=' + ${pageNum}" th:text="${pageNum + 1}" th:if="${pageNum ne users.pageable.getPageNumber()}"></a>
                <a th:href="'page.html?pageNum=' + ${pageNum}" th:text="${pageNum + 1}" th:if="${pageNum eq users.pageable.getPageNumber()}" th:style="'font-weight:bold;background: #6faed9;'"></a>
            </li>

            <!-- 下一页 -->
            <li th:if="${users.hasNext()}">
                <a th:href="'/page.html?pageNum=' + ${users.nextPageable().getPageNumber()}" th:text="下一页"></a>
            </li>

            <!-- 尾页 -->
            <li>
                <a th:href="'/page.html?pageNum=' + ${users.getTotalPages() - 1}">尾页</a>
            </li>

        </ul>
    </div>
</div>
</body>
</html>

注意：我上面html的路径是/page.html，读者请换成自己的，还有一些变量名和参数，如中user是我自己定义的，users是后端传过来的。

controller

控制层，从前端page.html接收参数，调用service层，实现相应功能

@GetMapping("/page.html")
    public String list(Model model, @RequestParam(value = "pageNum", defaultValue = "0") int pageNum, @RequestParam(value = "pageSize", defaultValue = "10") int pageSize) {
        Page<User> users=userService.getUserList(pageNum, pageSize);
        model.addAttribute("users", users);
        return "page";
    }

这里page导的包：import org.springframework.data.domain.Page;

Service层

Page<User> getUserList(int pageNum,int pageSize);

ServiceImpl

真正的业务实现层

/**
     * 分页查询
     * @param pageNum
     * @param pageSize
     * @return
     */
    @Override
    public Page<User> getUserList(int pageNum, int pageSize) {
        Sort.Order order=new Sort.Order(Sort.Direction.ASC, "id");
        Pageable pageable = PageRequest.of(pageNum, pageSize, Sort.by(order));
        Page<User> users = userDao.findAll(pageable);
        return users;
    }

上面代码的id是主键
首先来说一下分页和排序所用到的Page、Pageable接口和Sort类都是什么

JpaRepository提供了两个和分页和排序有关的查询

List findAll（Sort sort）返回所有实体，按照指定顺序排序返回

List findAll（Pageable pageable）返回实体列表，实体的offest和limit通过pageable来指定

Sort对象用来指示排序，最简单的Sort对象构造可以传入一个属性名列表（不是数据库列名，是属性名），默认采用升序排序。例：

Sort sort = new Sort(“id”)；
//或 Sort sort = new Sort(Direction.ASC,“id”);
return userDao.findAll(sort);
程序将查询所有user并按照id进行生序排序。

dao

public interface UserDao extends JpaRepository<User,Integer> {}

效果

在这里插入图片描述

小奔跳跳

发布了89 篇原创文章 · 获赞 5 · 访问量 1万+

私信关注