• Spring Data JPA - Web 支持、排序和分页

    在前面的教程中，我们已经看到了如何使用 Spring Data 分页 Web 支持。在本教程中，我们将了解如何使用排序支持。

    在基于 Web 的应用程序中应用排序主要有两种方法：

    按可分页处理程序参数排序

    我们在前面的示例中使用过，但没有任何排序查询参数。除了分页信息外，还可以设置排序信息（查看这个和这个）。在这种情况下，我们必须使用类似于以下内容的查询字符串：PageablePageable

    ?page=1&size=10&sort=personName,desc

    相当于：

      PageRequest.of(1,10, Sort.by("personName").descending())

    按排序处理程序参数排序

    我们也可以用作控制器方法参数（查看我们的排序基本示例）。在这种情况下，我们需要创建类似于以下内容的查询字符串：Sort

    ?sort=personName,desc

    相当于：

      Sort.by("personName").descending()

    @SortDefault注释

    此批注定义将 Sort 实例注入控制器处理程序方法时要使用的默认排序选项。

    SortHandlerMethodArgumentResolver

    在上述两种情况下，用于从请求参数或 SortDefault 注释自动创建排序实例。当我们在配置类中使用时，此解析器处于活动状态。SortHandlerMethodArgumentResolver@EnableSpringDataWebSupport

    例

    实体

    1. @Entity
    2. public class Employee {
    3.   private @Id
    4.   @GeneratedValue
    5.   Long id;
    6.   private String name;
    7.   private String dept;
    8.   private int salary;
    9.     .............
    10. }

    存储 库

    1. public interface EmployeeRepository extends PagingAndSortingRepository {
    2.  
    3.   @Query("SELECT DISTINCT e.dept FROM Employee e")
    4.   List findAllDepartments(Sort sort);
    5. }

    我们在上面的存储库 withparameter 中创建了一个自定义查询方法，以便我们可以在控制器中使用 Sort 参数，该参数只会为视图生成部门列表。Sort

    MVC 控制器

    在下面的控制器中，我们将使用两种处理程序方法，一种是使用可分页参数，另一种是使用 Sort 参数：

    1. @Controller
    2. public class EmployeeController {
    3.  
    4.   @Autowired
    5.   private EmployeeRepository repository;
    6.  
    7.   @GetMapping("/employees")
    8.   public String getEmployees(@PageableDefault(size = 10, sort = "id") Pageable pageable,
    9.                              Model model) {
    10.       Page page = repository.findAll(pageable);
    11.       List sortOrders = page.getSort().stream().collect(Collectors.toList());
    12.       if (sortOrders.size() > 0) {
    13.           Sort.Order order = sortOrders.get(0);
    14.           model.addAttribute("sortProperty", order.getProperty());
    15.           model.addAttribute("sortDesc", order.getDirection() == Sort.Direction.DESC);
    16.       }
    17.       model.addAttribute("page", page);
    18.       return "employee-page";
    19.   }
    20.  
    21.   @GetMapping("departments")
    22.   public String getDepartments(@SortDefault(sort="dept",direction = Sort.Direction.ASC)
    23.                                            Sort sort, Model model) {
    24.       List depts = repository.findAllDepartments(sort);
    25.       model.addAttribute("depts", depts);
    26.       return "dept-page";
    27.   }
    28. }

    Thymeleaf 视图

    跟随视图同时实现排序和分页。我们正在通过单击表标题进行单列排序。这类似于Java Swing JTable排序功能（在此处查看示例）。

    我们使用 JQuery 来处理表头单击和显示箭头;▾ 和 ▴ 分别在正确的位置进行降序和升序排序。

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

    3.       xmlns:th="http://www.thymeleaf.org">
    5.   
    6.   
    7.   
    10. Employees
    12.     
    13.     
    14.         
    15.         
    16.         
    17.         
    18.     
    19.     
    20.     
    21.         
    22.         
    23.         
    24.         
    25.     
      27. IdNameDepartmentSalary
    29.     
    30.         Previous
    31.     
    32.     
    33.         [[${i}+1]]
    34.         
    35.              [[${i}+1]]
    36.         
    37.     
    38.     
    39.         Next
    40.

    • 以下视图仅显示部门列表。相应的处理程序方法（如上所示）仅使用参数。Sort

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

    3.       xmlns:th="http://www.thymeleaf.org">
    5. Departments
    6.     
    7.         
    8.     

    10. In ascending order 
    11. In descending order

    运行

    要尝试示例，请运行以下示例项目的嵌入式tomcat（在pom中配置.xml）：

    mvn tomcat7:run-war

    输出

    localhost:8080/employees

    如上所示，默认情况下选择第一页，并按升序对“id”列进行排序。让我们点击“名称”列标题：

    查看上面地址栏中的查询字符串，其中存在所有必需的查询参数。单击“名称”标题上的更多时间将更改排序方向：

    单击分页按钮可保留上次排序的列。

    让我们通过本地主机访问部门页面：localhost:8080/departments

    单击底部的“降序”链接将按降序显示部门：

    1. html>
    2. <html xmlns="http://www.w3.org/1999/xhtml"
    3.       xmlns:th="http://www.thymeleaf.org">
    4.     <head>
    5.         <link rel="icon" th:href="@{/assets/img/favicon.png}"  />
    6.         <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
    7.         <link rel="stylesheet" type="text/css" th:href="@{/webjars/font-awesome/css/all.min.css}"/>
    8.         <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap-icons/font/bootstrap-icons.css}"/>
    9.         <link rel="stylesheet" type="text/css" th:href="@{/assets/css/style.css}" />
    10.         <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
    11.         <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}">script>
    12.         <script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}">script>
    13.         <script th:inline="javascript">
    14.             //thymeleaf to javascript variables
    15.             /*
    16.             var sortProperty = /*[[${sortProperty}]]*/ null;
    17.             var sortDesc = /*[[${sortDesc}]]*/ null;
    18.             var currentPage = /*[[${page.number}]]*/ 0;
    19.             var pageSize = /*[[${page.size}]]*/ 0;
    20.             /*]]>*/
    21.  
    22.             $(document).ready(function () {
    23.                 //show up/down arrows
    24.                 $("table#emp-table thead th").each(function () {
    25.                     var head = $(this);
    26.                     if (head.attr('data-sort-prop') == sortProperty) {
    27.                         head.append(sortDesc ? '▾' : '▴');
    28.                     }
    29.                 });
    30.  
    31.                 //set click action, reload page on clicking with all query params
    32.                 $("table#emp-table thead th").click(function () {
    33.                     var headerSortPropName = $(this).attr("data-sort-prop");
    34.                     if (headerSortPropName == sortProperty) {
    35.                         window.location.href = window.location.pathname +
    36.                                 '?page=' + currentPage + '&size=' + pageSize + '&sort=' + headerSortPropName + ',' +
    37.                                 (sortDesc ? 'asc' : 'desc');
    38.                     } else {
    39.                         window.location.href = window.location.pathname +
    40.                                 '?page=' + currentPage + '&size=' + pageSize + '&sort=' + headerSortPropName + ',asc';
    41.                     }
    42.                 });
    43.             });
    44.         script>
    45.         <style>
    46.             table{
    47.                 width:100%;
    48.             }
    49.             table td, table th {
    50.                 border: 1px solid grey;
    51.             }
    52.             table th {
    53.                 user-select: none;
    54.                 background: #eee;
    55.             }
    56.             table tr th:first-child{
    57.                 width:100px;
    58.             }
    59.             table tr th:nth-child(3){
    60.                 width:150px;
    61.             }
    62.             table tr th:nth-child(4){
    63.                 width:150px;
    64.             }
    65.             .pagination-div{
    66.                 user-select: none;
    67.             }
    68.             .pagination-div span{
    69.                 border-radius:3px;
    70.                 border:1px solid #999;
    71.                 padding:5px;
    72.                 margin:10px 0px 0px 10px;
    73.                 display:inline-block
    74.             }
    75.             span.selected{
    76.                 background:#ccf;
    77.             }
    78.         style>
    79.     head>
    80.     <body>
    81.         <h2>Employeesh2>
    82.         <div class="my-3 ">
    83.  
    84.             <div class="row d-flex flex-row">
    85.                 <form th:action="@{/employees}" id="searchForm" >
    86.                     <div class="row">
    87.                         <div class="col-sm-8">
    88.                             <div class="col-md-12 mt-2">
    89.                                 <div class="search">
    90.                                     <i class="fa fa-search">i>
    91.                                     <input id="keyword" type="search" name="keyword" th:value="${keyword}" required class="form-control"
    92.                                            placeholder="Enter keyword">
    93.                                         <button type="submit" class="btn btn-secondary">搜索button>
    94.                                 div>
    95.                             div>
    96.                         div>
    97.                         <div class="col-sm-3">
    98.                             <div class="col-md-12 input-group mt-2">
    99.                                 <div class="input-group-prepend">
    100.                                     <label class="input-group-text" for="pageSize">每页显示行数:label>
    101.                                 div>
    102.                                 <select form="searchForm" name="size" th:value="${pageSize}" onchange="changePageSize()" class="size-select"
    103.                                         id="pageSize">
    104.                                     <option th:each="s : ${ {10, 25, 50} }" th:value="${s}" th:text="${s}" th:selected="${s == page.size}">option>
    105.                                 select>
    106.                             div>
    107.                         div>
    108.                         <div class="col-sm-1">
    109.                             <div class="col-md-12 mt-2">
    110.                                 <button id="btnClear" class="btn btn-info">重置button>
    111.                             div>
    112.                         div>
    113.                     div>
    114.                 form>
    115.             div>
    116.  
    117.         div>
    118.         <table id="emp-table">
    119.             <thead>
    120.                 <tr>
    121.                     <th data-sort-prop="id">Idth>
    122.                     <th data-sort-prop="name">Nameth>
    123.                     <th data-sort-prop="dept">Departmentth>
    124.                     <th data-sort-prop="salary">Salaryth>
    125.                 tr>
    126.             thead>
    127.             <tr th:each="employee : ${page.content}">
    128.                 <td th:text="${employee.id}">td>
    129.                 <td th:text="${employee.name}">td>
    130.                 <td th:text="${employee.dept}">td>
    131.                 <td th:text="${employee.salary}">td>
    132.             tr>
    133.         table>
    134.         
    135.         <div class="pagination-div" th:with="sortParam=${sortProperty+','+(sortDesc?'desc':'asc')}">
    136.             <span th:if="${page.hasPrevious()}">
    137.                 <a th:href="@{/employees(page=${page.number-1},size=${page.size},sort=${sortParam})}">Previousa>
    138.             span>
    139.             <th:block th:each="i: ${#numbers.sequence(0, page.totalPages - 1)}">
    140.                 <span th:if="${page.number == i}" class="selected">[[${i}+1]]span>
    141.                 <span th:unless="${page.number == i}">
    142.                     <a th:href="@{/employees(page=${i},size=${page.size},sort=${sortParam})}">[[${i}+1]]a>
    143.                 span>
    144.             th:block>
    145.             <span th:if="${page.hasNext()}">
    146.                 <a th:href="@{/employees(page=${page.number+1},size=${page.size},sort=${sortParam})}">Nexta>
    147.             span>
    148.         div>
    149.  
    150.         <div class="row">
    151.             <div class="col-sm-6">
    152.                 <div th:if="${page.totalPages > 0}">
    153.                     总计<span th:text="${page.totalElements}">99span>行，当前显示<span th:text="(${page.number} )*${page.size} +1">1span> -
    154.                     <span th:text="(${page.number} )*${page.size} +${page.numberOfElements}">5span>行   总计<span th:text="${page.totalPages}">99span>页
    155.                 div>
    156.             div>
    157.             <div class="col-sm-6" th:with="sortParam=${sortProperty+','+(sortDesc?'desc':'asc')}">
    158.                 <nav aria-label="Pagination" th:if="${page.totalPages > 0}">
    159.                     <ul class="pagination justify-content-center">
    160.                         <li class="page-item" th:classappend="${page.number == 0} ? 'disabled'">
    161.                             <a class="page-link"
    162.                                th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' +'0'+ '&size=' + ${page.size}+'&sort='+${sortParam}}"
    163.                                title="First Page" rel="First Page">
    164.                                 最前页
    165.                             a>
    166.                         li>
    167.                         <li class="page-item font-weight-bold" th:classappend="${page.number == 0} ? 'disabled'">
    168.                             <a class="page-link"
    169.                                th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' + ${page.number - 1} + '&size=' + ${page.size}+'&sort='+${sortParam}}"
    170.                                title="Previous Page" rel="Previous Page">
    171.                                 前一页
    172.                             a>
    173.                         li>
    174.                         <li class="page-item disabled" th:if="${page.number - 2 > 0}">
    175.                             <a class="page-link" href="#">...a>
    176.                         li>
    177.                         <li
    178.                             th:each="i : ${#numbers.sequence(page.number > 2 ? page.number - 2 : 0, page.number + 2 < page.totalPages ? page.number + 2 : page.totalPages-1)}"
    179.                             class="page-item" th:classappend="${i == page.number} ? 'active'">
    180.                             <a class="page-link"
    181.                                th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' + ${i} + '&size=' + ${page.size}+'&sort='+${sortParam}}"
    182.                                th:title=${i+1} th:rel=${i+1}>
    183.                                 [[${i+1} ]]
    184.                             a>
    185.                         li>
    186.                         <li class="page-item disabled" th:if="${page.number + 2 < page.totalPages}">
    187.                             <a class="page-link" href="#">...a>
    188.                         li>
    189.                         <li class="page-item font-weight-bold" th:classappend="${page.number == page.totalPages-1} ? 'disabled'">
    190.                             <a class="page-link"
    191.                                th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' + ${page.number + 1} + '&size=' + ${page.size}+'&sort='+${sortParam}}"
    192.                                title="Next Page" rel="Next Page">
    193.                                 后一页
    194.                             a>
    195.                         li>
    196.                         <li class="page-item" th:classappend="${page.number == page.totalPages-1} ? 'disabled'">
    197.                             <a class="page-link"
    198.                                th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' +${page.totalPages-1}+ '&size=' + ${page.size}+'&sort='+${sortParam}}"
    199.                                title="Last Page" rel="Last Page">
    200.                                 最后页
    201.                             a>
    202.                         li>
    203.                     ul>
    204.                 nav>
    205.             div>
    206.         div>
    207.         <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
    208.                 class="bi bi-arrow-up-short">i>a>
    209.         <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}">script>
    210.         <script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}">script>
    211.         <script type="text/javascript" th:src="@{/assets/js/main.js}" >script>
    212.         <script type="text/javascript">
    213.             $(document).ready(function () {
    214.                 $(".btn-delete").on("click", function (e) {
    215.                     e.preventDefault();
    216.                     link = $(this);
    217.  
    218.                     tutorialTitle = link.attr("tutorialTitle");
    219.                     $("#yesBtn").attr("href", link.attr("href"));
    220.                     $("#confirmText").html("Do you want to delete the Tutorial \" + tutorialTitle + "\<\/strong\>?");
    221.                     var myModal = new bootstrap.Modal(document.getElementById('confirmModal'), {
    222.                         keyboard: false
    223.                     });
    224.                     myModal.toggle();
    225.                 });
    226.  
    227.                 $("#btnClear").on("click", function (e) {
    228.                     e.preventDefault();
    229.                     $("#keyword").text("");
    230.                     window.location = "[[@{/employees}]]";
    231.                 });
    232.             });
    233.  
    234.             function changePageSize() {
    235.                 $("#searchForm").submit();
    236.             }
    237.         script>
    238.     body>
    239. html>

    添加搜索/过滤功能

    1. package com.example;
    2.  
    3. import org.springframework.data.domain.Page;
    4. import org.springframework.data.domain.Pageable;
    5. import org.springframework.data.jpa.repository.JpaRepository;
    6. import org.springframework.data.jpa.repository.Query;
    7.  
    8. public interface EmployeeRepository extends JpaRepository {
    9.  
    10.     @Query("SELECT e FROM Employee e WHERE CONCAT(e.name, ' ', e.dept) LIKE %?1%")
    11.     public Page search(String keyword, Pageable pageable);
    12. }
    1. package com.example;
    2.  
    3. import java.util.List;
    4. import java.util.stream.Collectors;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.data.domain.Page;
    7. import org.springframework.data.domain.Pageable;
    8. import org.springframework.data.domain.Sort;
    9. import org.springframework.data.repository.query.Param;
    10. import org.springframework.data.web.PageableDefault;
    11. import org.springframework.stereotype.Controller;
    12. import org.springframework.ui.Model;
    13. import org.springframework.web.bind.annotation.GetMapping;
    14.  
    15. @Controller
    16. public class EmployeeController {
    17.  
    18.     @Autowired
    19.     private EmployeeRepository repository;
    20.  
    21.     @GetMapping("/employees")
    22.     public String getEmployees(@Param("keyword") String keyword, @PageableDefault(size = 10, sort = "id") Pageable pageable,
    23.             Model model) {
    24.  
    25.         if (keyword == null) {
    26.             Page page = repository.findAll(pageable);
    27.             List sortOrders = page.getSort().stream().collect(Collectors.toList());
    28.             if (sortOrders.size() > 0) {
    29.                 Sort.Order order = sortOrders.get(0);
    30.                 model.addAttribute("sortProperty", order.getProperty());
    31.                 model.addAttribute("sortDesc", order.getDirection() == Sort.Direction.DESC);
    32.             }
    33.             model.addAttribute("page", page);
    34.         } else {
    35.             Page page = repository.search(keyword, pageable);
    36.             List sortOrders = page.getSort().stream().collect(Collectors.toList());
    37.             if (sortOrders.size() > 0) {
    38.                 Sort.Order order = sortOrders.get(0);
    39.                 model.addAttribute("sortProperty", order.getProperty());
    40.                 model.addAttribute("sortDesc", order.getDirection() == Sort.Direction.DESC);
    41.             }
    42.             model.addAttribute("keyword", keyword);
    43.             model.addAttribute("page", page);
    44.         }
    45.  
    46.         return "employee-page";
    47.  
    48.     }
    49.  
    50. }
    1. html>
    2. <html xmlns="http://www.w3.org/1999/xhtml"
    3.       xmlns:th="http://www.thymeleaf.org">
    4.     <head>
    5.         <link rel="icon" th:href="@{/assets/img/favicon.png}"  />
    6.         <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
    7.         <link rel="stylesheet" type="text/css" th:href="@{/webjars/font-awesome/css/all.min.css}"/>
    8.         <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap-icons/font/bootstrap-icons.css}"/>
    9.         <link rel="stylesheet" type="text/css" th:href="@{/assets/css/style.css}" />
    10.         <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
    11.         <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}">script>
    12.         <script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}">script>
    13.         <script th:inline="javascript">
    14.             //thymeleaf to javascript variables
    15.             /*
    16.             var sortProperty = /*[[${sortProperty}]]*/ null;
    17.             var sortDesc = /*[[${sortDesc}]]*/ null;
    18.             var currentPage = /*[[${page.number}]]*/ 0;
    19.             var pageSize = /*[[${page.size}]]*/ 0;
    20.             /*]]>*/
    21.  
    22.             $(document).ready(function () {
    23.                 //show up/down arrows
    24.                 $("table#emp-table thead th").each(function () {
    25.                     var head = $(this);
    26.                     if (head.attr('data-sort-prop') == sortProperty) {
    27.                         head.append(sortDesc ? '▾' : '▴');
    28.                     }
    29.                 });
    30.  
    31.                 //set click action, reload page on clicking with all query params
    32.                 $("table#emp-table thead th").click(function () {
    33.                     var headerSortPropName = $(this).attr("data-sort-prop");
    34.                     if (headerSortPropName == sortProperty) {
    35.                         window.location.href = window.location.pathname +
    36.                                 '?page=' + currentPage + '&size=' + pageSize + '&sort=' + headerSortPropName + ',' +
    37.                                 (sortDesc ? 'asc' : 'desc');
    38.                     } else {
    39.                         window.location.href = window.location.pathname +
    40.                                 '?page=' + currentPage + '&size=' + pageSize + '&sort=' + headerSortPropName + ',asc';
    41.                     }
    42.                 });
    43.             });
    44.         script>
    45.         <style>
    46.             table{
    47.                 width:100%;
    48.             }
    49.             table td, table th {
    50.                 border: 1px solid grey;
    51.             }
    52.             table th {
    53.                 user-select: none;
    54.                 background: #eee;
    55.             }
    56.             table tr th:first-child{
    57.                 width:100px;
    58.             }
    59.             table tr th:nth-child(3){
    60.                 width:150px;
    61.             }
    62.             table tr th:nth-child(4){
    63.                 width:150px;
    64.             }
    65.             .pagination-div{
    66.                 user-select: none;
    67.             }
    68.             .pagination-div span{
    69.                 border-radius:3px;
    70.                 border:1px solid #999;
    71.                 padding:5px;
    72.                 margin:10px 0px 0px 10px;
    73.                 display:inline-block
    74.             }
    75.             span.selected{
    76.                 background:#ccf;
    77.             }
    78.         style>
    79.     head>
    80.     <body>
    81.         <h2>Employeesh2>
    82.         <div class="my-3 ">
    83.  
    84.             <div class="row d-flex flex-row">
    85.                 <form th:action="@{/employees}" id="searchForm" >
    86.                     <div class="row">
    87.                         <div class="col-sm-8">
    88.                             <div class="col-md-12 mt-2">
    89.                                 <div class="search">
    90.                                     <i class="fa fa-search">i>
    91.                                     <input id="keyword" type="search" name="keyword" th:value="${keyword}" required class="form-control"
    92.                                            placeholder="Enter keyword">
    93.                                         <button type="submit" class="btn btn-secondary">搜索button>
    94.                                 div>
    95.                             div>
    96.                         div>
    97.                         <div class="col-sm-3">
    98.                             <div class="col-md-12 input-group mt-2">
    99.                                 <div class="input-group-prepend">
    100.                                     <label class="input-group-text" for="pageSize">每页显示行数:label>
    101.                                 div>
    102.                                 <select form="searchForm" name="size" th:value="${pageSize}" onchange="changePageSize()" class="size-select"
    103.                                         id="pageSize">
    104.                                     <option th:each="s : ${ {10, 25, 50} }" th:value="${s}" th:text="${s}" th:selected="${s == page.size}">option>
    105.                                 select>
    106.                             div>
    107.                         div>
    108.                         <div class="col-sm-1">
    109.                             <div class="col-md-12 mt-2">
    110.                                 <button id="btnClear" class="btn btn-info">重置button>
    111.                             div>
    112.                         div>
    113.                     div>
    114.                 form>
    115.             div>
    116.  
    117.         div>
    118.         <table id="emp-table">
    119.             <thead>
    120.                 <tr>
    121.                     <th data-sort-prop="id">Idth>
    122.                     <th data-sort-prop="name">Nameth>
    123.                     <th data-sort-prop="dept">Departmentth>
    124.                     <th data-sort-prop="salary">Salaryth>
    125.                 tr>
    126.             thead>
    127.             <tr th:each="employee : ${page.content}">
    128.                 <td th:text="${employee.id}">td>
    129.                 <td th:text="${employee.name}">td>
    130.                 <td th:text="${employee.dept}">td>
    131.                 <td th:text="${employee.salary}">td>
    132.             tr>
    133.         table>
    134.  
    135.  
    136.         <div class="row">
    137.             <div class="col-sm-6">
    138.                 <div th:if="${page.totalPages > 0}">
    139.                     总计<span th:text="${page.totalElements}">99span>行，当前显示<span th:text="(${page.number} )*${page.size} +1">1span> -
    140.                     <span th:text="(${page.number} )*${page.size} +${page.numberOfElements}">5span>行   总计<span th:text="${page.totalPages}">99span>页
    141.                 div>
    142.             div>
    143.             <div class="col-sm-6" th:with="sortParam=${sortProperty+','+(sortDesc?'desc':'asc')}">
    144.                 <nav aria-label="Pagination" th:if="${page.totalPages > 0}">
    145.                     <ul class="pagination justify-content-center">
    146.                         <li class="page-item" th:classappend="${page.number == 0} ? 'disabled'">
    147.                             <a class="page-link"
    148.                                th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' +'0'+ '&size=' + ${page.size}+'&sort='+${sortParam}}"
    149.                                title="First Page" rel="First Page">
    150.                                 最前页
    151.                             a>
    152.                         li>
    153.                         <li class="page-item font-weight-bold" th:classappend="${page.number == 0} ? 'disabled'">
    154.                             <a class="page-link"
    155.                                th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' + ${page.number - 1} + '&size=' + ${page.size}+'&sort='+${sortParam}}"
    156.                                title="Previous Page" rel="Previous Page">
    157.                                 前一页
    158.                             a>
    159.                         li>
    160.                         <li class="page-item disabled" th:if="${page.number - 2 > 0}">
    161.                             <a class="page-link" href="#">...a>
    162.                         li>
    163.                         <li
    164.                             th:each="i : ${#numbers.sequence(page.number > 2 ? page.number - 2 : 0, page.number + 2 < page.totalPages ? page.number + 2 : page.totalPages-1)}"
    165.                             class="page-item" th:classappend="${i == page.number} ? 'active'">
    166.                             <a class="page-link"
    167.                                th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' + ${i} + '&size=' + ${page.size}+'&sort='+${sortParam}}"
    168.                                th:title=${i+1} th:rel=${i+1}>
    169.                                 [[${i+1} ]]
    170.                             a>
    171.                         li>
    172.                         <li class="page-item disabled" th:if="${page.number + 2 < page.totalPages}">
    173.                             <a class="page-link" href="#">...a>
    174.                         li>
    175.                         <li class="page-item font-weight-bold" th:classappend="${page.number == page.totalPages-1} ? 'disabled'">
    176.                             <a class="page-link"
    177.                                th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' + ${page.number + 1} + '&size=' + ${page.size}+'&sort='+${sortParam}}"
    178.                                title="Next Page" rel="Next Page">
    179.                                 后一页
    180.                             a>
    181.                         li>
    182.                         <li class="page-item" th:classappend="${page.number == page.totalPages-1} ? 'disabled'">
    183.                             <a class="page-link"
    184.                                th:href="@{'/employees?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' +${page.totalPages-1}+ '&size=' + ${page.size}+'&sort='+${sortParam}}"
    185.                                title="Last Page" rel="Last Page">
    186.                                 最后页
    187.                             a>
    188.                         li>
    189.                     ul>
    190.                 nav>
    191.             div>
    192.         div>
    193.         <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
    194.                 class="bi bi-arrow-up-short">i>a>
    195.         <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}">script>
    196.         <script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}">script>
    197.         <script type="text/javascript" th:src="@{/assets/js/main.js}" >script>
    198.         <script type="text/javascript">
    199.             $(document).ready(function () {
    200.                 $(".btn-delete").on("click", function (e) {
    201.                     e.preventDefault();
    202.                     link = $(this);
    203.  
    204.                     tutorialTitle = link.attr("tutorialTitle");
    205.                     $("#yesBtn").attr("href", link.attr("href"));
    206.                     $("#confirmText").html("Do you want to delete the Tutorial \" + tutorialTitle + "\<\/strong\>?");
    207.                     var myModal = new bootstrap.Modal(document.getElementById('confirmModal'), {
    208.                         keyboard: false
    209.                     });
    210.                     myModal.toggle();
    211.                 });
    212.  
    213.                 $("#btnClear").on("click", function (e) {
    214.                     e.preventDefault();
    215.                     $("#keyword").text("");
    216.                     window.location = "[[@{/employees}]]";
    217.                 });
    218.             });
    219.  
    220.             function changePageSize() {
    221.                 $("#searchForm").submit();
    222.             }
    223.         script>
    224.     body>
    225. html>

     

    示例项目

    https://www.logicbig.com/tutorials/spring-framework/spring-data/sorting-and-pagination/spring-data-jpa-sorting-and-pagination.zip

  • 相关阅读:
    Serverless Devs 进入 CNCF 沙箱，成首个入选的 Serverless 工具项目
    2022Vue经典面试题及答案汇总(持续更新）
    基本算法-插入排序
    [附源码]SSM计算机毕业设计基于的高校学生考勤管理系统JAVA
    【分享】“维格表“在集简云平台集成应用的常见问题与解决方案
    3.18 悟透了这三条，能让你的小红书运营能力更上一层楼【玩赚小红书】
    丰田工厂停产竟然因为磁盘...
    GIS工具maptalks开发手册(二)01-02之GeoJSON转化为Geometry——渲染点
    xml创建模型组合体
    3.Node-事件循环用法
  • 原文地址：https://blog.csdn.net/allway2/article/details/128153845