Spring Data JPA使用Pageable 参数Thymeleaf 视图进行分页

上一个教程中,我们看到了如何在Spring MVC控制器方法中使用参数。以下示例显示了如何将 Spring 数据分页与 Thymeleaf 视图一起使用。我们还将使用注释来更改默认页面大小。Pageable@PageableDefault

实体

package com.example;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.Data;
import org.hibernate.annotations.DynamicUpdate;
import org.hibernate.envers.Audited;

@Data
@Entity
@DynamicUpdate

@Audited
public class Employee {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String dept;
    private Integer salary;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDept() {
        return dept;
    }

    public void setDept(String dept) {
        this.dept = dept;
    }

    public int getSalary() {
        return salary;
    }

    public void setSalary(int salary) {
        this.salary = salary;
    }

    public static Employee create(String name,String dept,int salary) {
        Employee e = new Employee();
        e.setName(name);
        e.setDept(dept);
        e.setSalary(salary);
        return e;
    }

    @Override
    public String toString() {
        return "Employee{"
                + "id=" + id
                + ",name='" + name + '\''
                + ",dept='" + dept + '\''
                + ",salary=" + salary
                + '}';
    }
}

存储 库

package com.example;

import org.springframework.data.jpa.repository.JpaRepository;

public interface EmployeeRepository extends JpaRepository<Employee,Long> {
}

弹簧MVC控制器

package com.example;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.web.PageableDefault;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class EmployeeController {

    @Autowired
    private EmployeeRepository repository;

    @GetMapping("/employees")
    public String getEmployees(@PageableDefault(size = 10) Pageable pageable,Model model) {
        Page<Employee> page = repository.findAll(pageable);
        model.addAttribute("page",page);
        return "employee-page";
    }
}

百里香叶视图

src/main/webapp/WEB-INF/views/employee-page.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <style>
            table{
                width:100%;
            }
            table td,table th {
                border: 1px solid grey;
            }
            table th {
                background: #eee;
            }
            .pagination-div{
                user-select: none;
            }
            .pagination-div span{
                border-radius:3px;
                border:1px solid #999;
                padding:5px;
                margin:10px 0px 0px 10px;
                display:inline-block
            }
            span.selected{
                background:#ccf;
            }
        </style>
    </head>
    <body>
        <h2>Employees</h2>
        <table>
            <tr><th>Id</th>
                <th>Name</th>
                <th>Department</th>
                <th>Salary</th>
            </tr>
            <tr th:each="employee : ${page.content}">
                <td th:text="${employee.id}"></td>
                <td th:text="${employee.name}"></td>
                <td th:text="${employee.dept}"></td>
                <td th:text="${employee.salary}"></td>
            </tr>
        </table>

        <div class="pagination-div">
            <span th:if="${page.hasPrevious()}">
                <a th:href="@{/employees(page=${page.number-1},size=${page.size})}">Previous</a>
            </span>
            <th:block th:each="i: ${#numbers.sequence(0,page.totalPages - 1)}">
                <span th:if="${page.number == i}" class="selected">[[${i}+1]]</span>
                <span th:unless="${page.number == i}">
                    <a th:href="@{/employees(page=${i},size=${page.size})}">[[${i}+1]]</a>
                </span>
            </th:block>
            <span th:if="${page.hasNext()}">
                <a th:href="@{/employees(page=${page.number+1},size=${page.size})}">Next</a>
            </span>
        </div>
    </body>
</html>

运行

要尝试示例,请运行以下示例项目的嵌入式tomcat(在pom中配置.xml):

mvn tomcat7:run-war

输出

本地主机:8080/员工

通过单击页面链接导航到页面:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <link rel="icon" th:href="@{/assets/img/favicon.png}"  />
        <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
        <link rel="stylesheet" type="text/css" th:href="@{/webjars/font-awesome/css/all.min.css}"/>
        <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap-icons/font/bootstrap-icons.css}"/>
        <link rel="stylesheet" type="text/css" th:href="@{/assets/css/style.css}" />
        <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
        <style>
            table{
                width:100%;
            }
            table td,table th {
                border: 1px solid grey;
            }
            table th {
                background: #eee;
            }
            .pagination-div{
                user-select: none;
            }
            .pagination-div span{
                border-radius:3px;
                border:1px solid #999;
                padding:5px;
                margin:10px 0px 0px 10px;
                display:inline-block
            }
            span.selected{
                background:#ccf;
            }
        </style>
    </head>
    <body>
        <h2>Employees</h2>
        <div class="my-3 ">

            <div class="row d-flex flex-row">
                <form th:action="@{/employees}" id="searchForm" >
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="col-md-12 mt-2">
                                <div class="search">
                                    <i class="fa fa-search"></i>
                                    <input id="keyword" type="search" name="keyword" th:value="${keyword}" required class="form-control"
                                           placeholder="Enter keyword">
                                    <button type="submit" class="btn btn-secondary">搜索</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="col-md-12 input-group mt-2">
                                <div class="input-group-prepend">
                                    <label class="input-group-text" for="pageSize">每页显示行数:</label>
                                </div>
                                <select form="searchForm" name="size" th:value="${pageSize}" onchange="changePageSize()" class="size-select"
                                        id="pageSize">
                                    <option th:each="s : ${ {10,25,50} }" th:value="${s}" th:text="${s}" th:selected="${s == pageSize}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-1">
                            <div class="col-md-12 mt-2">
                                <button id="btnClear" class="btn btn-info">重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

        </div>
        <table>
            <tr><th>Id</th>
                <th>Name</th>
                <th>Department</th>
                <th>Salary</th>
            </tr>
            <tr th:each="employee : ${page.content}">
                <td th:text="${employee.id}"></td>
                <td th:text="${employee.name}"></td>
                <td th:text="${employee.dept}"></td>
                <td th:text="${employee.salary}"></td>
            </tr>
        </table>

        <div class="pagination-div">
            <span th:if="${page.hasPrevious()}">
                <a th:href="@{/employees(page=${page.number-1},size=${page.size})}">Next</a>
            </span>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div th:if="${page.totalPages > 0}">
                    总计<span th:text="${page.totalElements}">99</span>行,当前显示<span th:text="(${page.number} )*${page.size} +1">1</span> -
                    <span th:text="(${page.number} )*${page.size} +${page.numberOfElements}">5</span>行&nbsp; &nbsp;总计<span th:text="${page.totalPages}">99</span>页
                </div>
            </div>
            <div class="col-sm-6">
                <nav aria-label="Pagination" th:if="${page.totalPages > 0}">
                    <ul class="pagination justify-content-center">
                        <li class="page-item" th:classappend="${page.number == 0} ? 'disabled'">
                            <a class="page-link"
                               th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' +'0'+ '&size=' + ${page.size}}"
                               title="First Page" rel="First Page">
                                最前页
                            </a>
                        </li>
                        <li class="page-item font-weight-bold" th:classappend="${page.number == 0} ? 'disabled'">
                            <a class="page-link"
                               th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' + ${page.number - 1} + '&size=' + ${page.size}}"
                               title="Previous Page" rel="Previous Page">
                                前一页
                            </a>
                        </li>
                        <li class="page-item disabled" th:if="${page.number - 2 > 0}">
                            <a class="page-link" href="#">...</a>
                        </li>
                        <li
                            th:each="i : ${#numbers.sequence(page.number > 2 ? page.number - 2 : 0,page.number + 2 < page.totalPages ? page.number + 2 : page.totalPages-1)}"
                            class="page-item" th:classappend="${i == page.number} ? 'active'">
                            <a class="page-link"
                               th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' + ${i} + '&size=' + ${page.size}}"
                               th:title=${i+1} th:rel=${i+1}>
                                [[${i+1} ]]
                            </a>
                        </li>
                        <li class="page-item disabled" th:if="${page.number + 2 < page.totalPages}">
                            <a class="page-link" href="#">...</a>
                        </li>
                        <li class="page-item font-weight-bold" th:classappend="${page.number == page.totalPages-1} ? 'disabled'">
                            <a class="page-link"
                               th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' + ${page.number + 1} + '&size=' + ${page.size}}"
                               title="Next Page" rel="Next Page">
                                后一页
                            </a>
                        </li>
                        <li class="page-item" th:classappend="${page.number == page.totalPages-1} ? 'disabled'">
                            <a class="page-link"
                               th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' +${page.totalPages-1}+ '&size=' + ${page.size}}"
                               title="Last Page" rel="Last Page">
                                最后页
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
                class="bi bi-arrow-up-short"></i></a>
        <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
        <script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
        <script type="text/javascript" th:src="@{/assets/js/main.js}" ></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".btn-delete").on("click",function (e) {
                    e.preventDefault();
                    link = $(this);

                    tutorialTitle = link.attr("tutorialTitle");
                    $("#yesBtn").attr("href",link.attr("href"));
                    $("#confirmText").html("Do you want to delete the Tutorial \<strong\>" + tutorialTitle + "\<\/strong\>?");
                    var myModal = new bootstrap.Modal(document.getElementById('confirmModal'),{
                        keyboard: false
                    });
                    myModal.toggle();
                });

                $("#btnClear").on("click",function (e) {
                    e.preventDefault();
                    $("#keyword").text("");
                    window.location = "[[@{/employees}]]";
                });
            });

            function changePageSize() {
                $("#searchForm").submit();
            }
        </script>
    </body>
</html>

 

示例项目

https://www.logicbig.com/tutorials/spring-framework/spring-data/pagination-with-thymeleaf/spring-data-jpa-pagination-with-thymeleaf.zip

原文地址:https://blog.csdn.net/allway2

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


这篇文章主要介绍了spring的事务传播属性REQUIRED_NESTED的原理介绍,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。传统事务中回滚点的使...
今天小编给大家分享的是一文解析spring中事务的传播机制,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获...
这篇文章主要介绍了SpringCloudAlibaba和SpringCloud有什么区别,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。Spring Cloud Netfli...
本篇文章和大家了解一下SpringCloud整合XXL-Job的几个步骤。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。第一步:整合pom文件,在S...
本篇文章和大家了解一下Spring延迟初始化会遇到什么问题。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。List 坑列表 = new ArrayList(2);...
这篇文章主要介绍了怎么使用Spring提供的不同缓存注解实现缓存的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇...
本篇内容主要讲解“Spring中的@Autowired和@Resource注解怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学...
今天小编给大家分享一下SpringSecurity怎么定义多个过滤器链的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家
这篇文章主要介绍“Spring的@Conditional注解怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Spring的@Con...
这篇文章主要介绍了SpringCloudGateway的熔断限流怎么配置的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇SpringCloud&nb...
今天小编给大家分享一下怎么使用Spring解决循环依赖问题的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考
这篇文章主要介绍“Spring事务及传播机制的原理及应用方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Sp...
这篇“SpringCloudAlibaba框架实例应用分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价
本篇内容主要讲解“SpringBoot中怎么使用SpringMVC”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习...
这篇文章主要介绍“SpringMVC适配器模式作用范围是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“SpringMVC
这篇“导入SpringCloud依赖失败如何解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家...
这篇文章主要讲解了“SpringMVC核心DispatcherServlet处理流程是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来
今天小编给大家分享一下SpringMVCHttpMessageConverter消息转换器怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以...
这篇文章主要介绍“Spring框架实现依赖注入的原理是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Spring框架...
本篇内容介绍了“Spring单元测试控制Bean注入的方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下