Spring Boot Offset分页、Keyset 分页与Thymeleaf教程

清疚 2023-09-25 13:54 55阅读 0赞

欢迎，在本教程中，我们将解释弹簧启动应用程序中的分页，为此，我们将使用百里香叶。

### 1. 简介 ###

在继续本教程之前，我们将了解常用术语，例如 Spring Boot、龙目岛、百里香叶和分页简介。

#### 1.1 弹簧启动 ####

*  Spring 启动是一个模块，它为 *Spring*框架提供快速的应用程序开发功能，包括**自动配置**、独立代码和**生产就绪****代码**
 *  它创建打包为*jar*的应用程序，并使用嵌入式 servlet 容器（如 Tomcat、Jetty 或 Undertow）直接启动。因此，无需部署*战争*文件
 *  它通过提供初学者模板简化了 maven 配置，并有助于解决依赖项冲突。它会自动识别所需的依赖项并将其导入应用程序中
 *  它有助于删除样板代码、额外的注释和 xml 配置
 *  它提供强大的批处理并管理其余端点
 *  它提供了一个高效的*jpa-starter库*，可以有效地将应用程序与关系数据库连接起来
 *  它提供微服务架构和云配置，以集中方式管理所有与应用程序相关的配置属性

#### 1.2 龙目岛 ####

*  *龙目岛*只不过是一个小型库，它减少了项目中样板Java代码的数量
 *  使用龙目岛注释自动生成对象的吸气剂和二传手
 *  通过注释处理器 API 挂钩
 *  在 Java 编译器继续之前，原始源代码将传递给 Lombok 进行代码生成。因此，与Java编译器一起生成正确编译的Java代码
 *  在文件夹下，您可以查看已编译的类文件`target/classes`
 *  可以与Maven，Gradle IDE等一起使用。

1.2.1 龙目岛的特点

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;vertical-align:baseline;"><strong>特征</strong></th> 
   <th style="text-align:center;vertical-align:baseline;"><strong>详</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>val</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;">局部变量声明为<code>final</code></span></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>var</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;">可变局部变量</span></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>@Slf4J</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;">创建 SLF4J 记录器</span></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>@Cleanup</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;">将调用块中的资源<code>close()</code><code>finally</code></span></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>@Getter</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;">为所有属性创建 getter 方法</span></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>@Setter</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;">为所有非最终属性创建二传手</span></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>@EqualsAndHashCode</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"> 
    <ul style="margin-left:10px;"> 
     <li><span style="color:#555555;">生成和的实现<code>equals(Object other)</code><code>hashCode()</code></span></li> 
     <li><span style="color:#555555;">默认情况下将使用所有非静态、非瞬态属性</span></li> 
     <li><span style="color:#555555;">可以选择排除特定属性</span></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>@ToString</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"> 
    <ul style="margin-left:10px;"> 
     <li><span style="color:#555555;">生成类名的字符串，每个字段用逗号分隔</span></li> 
     <li><span style="color:#555555;">包含字段名称的可选参数</span></li> 
     <li><span style="color:#555555;">包含对超方法的调用的可选参数<code>toString</code></span></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>@NoArgsConstructor</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"> 
    <ul style="margin-left:10px;"> 
     <li><span style="color:#555555;">生成无参数构造函数</span></li> 
     <li><span style="color:#555555;">如果有最终字段，将导致编译器错误</span></li> 
     <li><span style="color:#555555;">可以选择强制，这将使用 0/false/null var 初始化最终字段 – 可变局部变量</span></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>@RequiredArgsContructor</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"> 
    <ul style="margin-left:10px;"> 
     <li><span style="color:#555555;">为所有标记为 或 的字段生成构造函数<code>final</code><code>@NonNull</code></span></li> 
     <li><span style="color:#555555;">构造函数将抛出 aif 任何字段为空值 – 声明局部变量<code>NullPointerException</code><code>@NonNull</code><code>final</code></span></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>@AllArgsConstructor</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"> 
    <ul style="margin-left:10px;"> 
     <li><span style="color:#555555;">为类的所有属性生成构造函数</span></li> 
     <li><span style="color:#555555;">任何属性都将具有空检查<code>@NotNull</code></span></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>@Data</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"> 
    <ul style="margin-left:10px;"> 
     <li><span style="color:#555555;">为 POJO 生成典型的样板代码</span></li> 
     <li><span style="color:#555555;">结合–<code>@Getter</code><code>@Setter</code><code>@ToString</code><code>@EqualsAndHashCode</code><code>@RequiredArgsConstructor</code></span></li> 
     <li><span style="color:#555555;">如果显式声明了构造函数，则不会生成构造函数</span></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>@Builder</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"> 
    <ul style="margin-left:10px;"> 
     <li><span style="color:#555555;">实现用于对象创建的<em>生成器</em>模式</span></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"><span style="color:#555555;"><code>@Value</code></span></td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"> 
    <ul style="margin-left:10px;"> 
     <li><span style="color:#555555;">的不可变变体<code>@Data</code></span></li> 
     <li><span style="color:#555555;">所有字段都是创建的，默认情况下<code>private</code><code>final</code></span></li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

#### 1.3 百里香叶 ####

*  Thymeleaf是用于 Web 应用程序的服务器端 Java 模板引擎
 *  它处理HTML，XML，JS，CSS和简单的文本，为Web应用程序带来优雅的设计
 *  要使用百里香叶，您必须在模板中定义依赖关系并提及库`spring-boot-starter-thymeleaf``pom.xml``xmlns:th="https://thymeleaf.org"`

#### 1.4 分页 ####

*  分页是将数据划分为合适的块以节省资源的过程
 *  为了在 Spring boot 应用程序中执行分页，我们将使用接口提供额外的方法来通过使用 spring boot 中的分页来检索结果（即从数据中获取第一页，每个大小有 10 个项目等）。`PagingAndSortingRepository`

### 2. 春季启动分页与百里香叶教程 ###

这是实现本教程的系统指南，但在进一步讨论之前，我假设您了解 Spring 启动基础知识。

#### 2.1 申请先决条件 ####

从本教程开始，我们希望您目前在他们最喜欢的选择 IDE 中安装了龙目岛插件。如果有人需要在IntelliJ IDE上完成龙目岛安装，请观看[此][Link 1]视频。要在 Eclipse IDE 上进行安装，请观看[此][Link 2]视频。

#### 2.2 使用的工具与项目结构 ####

我们正在使用 Eclipse Kepler SR2、JDK 8 和 Maven。如果您对应该在哪里创建相应的文件或文件夹感到困惑，让我们回顾一下 Spring 引导应用程序的项目结构。

![format_png][]

图1：项目结构

让我们开始构建应用程序！

### 3. 创建 Spring 引导应用程序 ###

以下是开发应用程序所涉及的步骤。

#### 3.1 Maven 依赖 ####

在这里，我们指定了Spring Boot，Spring Data JPA，Thymeleaf，H2数据库，Faker和Lombok的依赖关系。Maven 将自动解析其他依赖项。**更新后**的文件将具有以下代码。

*绒球.xml*

#### 3.2 应用程序属性 ####

在 location： 创建一个新的属性文件，并向其添加以下代码。`SpringbootThymeleafPaginationV2/src/main/resources/`

*应用程序属性*

#### 3.3 Java类 ####

让我们编写此应用程序中涉及的所有 java 类。

3.3.1 实现/主类

将以下代码添加到主类，以便从 main 方法启动应用程序。永远记住，Spring 引导应用程序的入口点是包含注释和静态 main 方法的类。`@SpringBootApplication`

*春靴百里香叶分页.java*

3.3.2 模型类

将以下代码添加到模型类中。`Resident`

*居民.java*

3.3.3 配置类

将以下代码添加到将返回该对象的 Bean 对象的 Bean 类中。此对象的用法可以在 theclass 中看到，该类用于在应用程序启动时将虚拟数据加载到数据库中。`faker``DefaultResidentsLoader.java`

*豆子配置.java*

3.3.4 数据访问对象接口

将以下代码添加到扩展接口的接口中。`PagingAndSortingRepository`

*居民存储库.java*

3.3.5 服务类

将以下代码添加到服务类中，我们将在其中调用 DAO 接口方法将数据保存到数据库中，并从数据库中获取数据。

*居民服务.java*

3.3.6 引导类

将以下代码添加到引导类，以便在应用程序启动时将虚拟数据保存到数据库中。这些数据将保存在 H2 数据库中。

*默认居民加载器.java*

3.3.7 索引控制器类

将以下代码添加到旨在处理传入请求的控制器类中。该类是用注释注释的，该方法将返回应用程序的页面。`@Controller``HTTP GET``index`

*ResidentController.java*

### 4. 百里香叶的变化 ###

我们将创建一个简单的 HTML 页面，该页面将以较小的块（即分页方法）在浏览器上显示*居民*。在 位置 ： 创建一个新的 HTML 文件，并向其添加以下代码。`SpringbootThymeleafPaginationV2/src/main/resources/templates/`

*索引.html*

<table> 
 <tbody> 
  <tr> 
   <td style="background-color:#f9f9f9;vertical-align:top;"> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">01</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">02</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">03</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">04</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">05</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">06</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">07</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">08</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">09</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">10</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">11</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">12</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">13</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">14</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">15</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">16</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">17</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">18</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">19</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">20</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">21</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">22</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">23</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">24</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">25</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">26</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">27</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">28</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">29</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">30</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">31</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">32</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">33</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">34</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">35</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">36</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">37</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">38</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">39</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">40</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">41</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">42</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">43</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">44</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">45</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">46</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">47</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">48</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">49</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">50</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">51</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">52</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">53</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">54</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">55</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">56</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">57</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">58</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">59</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">60</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">61</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">62</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">63</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">64</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">65</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">66</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">67</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">68</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">69</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">70</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">71</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">72</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">73</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">74</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">75</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">76</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">77</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">78</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">79</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">80</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">81</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">82</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">83</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">84</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">85</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">86</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">87</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">88</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">89</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">90</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">91</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">92</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">93</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">94</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">95</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">96</span></span></span> 
    </div> 
    <div style="margin-left:0;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">97</span></span></span> 
    </div> </td> 
   <td style="background-color:#f9f9f9;vertical-align:top;"> 
    <div style="margin-left:auto;"> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&lt;!</code><code>DOCTYPE</code>&nbsp;<code>html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&lt;</code><code>html</code>&nbsp;<code>lang</code><code>=</code><code>"en"</code>&nbsp;<code>xmlns:th</code><code>=</code><code>"<a href="http://www.thymeleaf.org/" title="http://www.thymeleaf.org" rel="nofollow">http://www.thymeleaf.org</a>"</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&lt;</code><code>head</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>meta</code>&nbsp;<code>charset</code><code>=</code><code>"UTF-8"</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>title</code><code>&gt;Index page&lt;/</code><code>title</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>link</code>&nbsp;<code>href</code><code>=</code><code>"<a href="https://examples.javacodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9zdGFja3BhdGguYm9vdHN0cmFwY2RuLmNvbS8=bootstrap/4.5.2/css/bootstrap.min.css" title="https://examples.javacodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9zdGFja3BhdGguYm9vdHN0cmFwY2RuLmNvbS8=bootstrap/4.5.2/css/bootstrap.min.css" rel="nofollow">https://examples.javacodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9zdGFja3BhdGguYm9vdHN0cmFwY2RuLmNvbS8=bootstrap/4.5.2/css/bootstrap.min.css</a>"</code>&nbsp;<code>rel</code><code>=</code><code>"stylesheet"</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>style</code>&nbsp;<code>type</code><code>=</code><code>"text/css"</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>th { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>text-align: center;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font-weight: bold;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border-top: none !important;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>th, td { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>white-space: nowrap;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.mt-20 { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin-top: 20px;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.table-alignment { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin-left: -200px;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>style</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&lt;/</code><code>head</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&lt;</code><code>body</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&lt;</code><code>div</code>&nbsp;<code>class</code><code>=</code><code>"container"</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>h3</code>&nbsp;<code>class</code><code>=</code><code>"text-info text-center mt-20"</code><code>&gt;Pagination Example : Residents&lt;/</code><code>h3</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>table</code>&nbsp;<code>class</code><code>=</code><code>"table table-striped table-alignment mt-20 text-center"</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>thead</code>&nbsp;<code>id</code><code>=</code><code>"residentsTable"</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>tr</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>th</code><code>&gt;Id&lt;/</code><code>th</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>th</code><code>&gt;Full name&lt;/</code><code>th</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>th</code><code>&gt;Age&lt;/</code><code>th</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>th</code><code>&gt;Gender&lt;/</code><code>th</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>th</code><code>&gt;Phone Number&lt;/</code><code>th</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>th</code><code>&gt;Email Address&lt;/</code><code>th</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>th</code><code>&gt;Date of Birth&lt;/</code><code>th</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>th</code><code>&gt;Home Address&lt;/</code><code>th</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>th</code><code>&gt;Nationality&lt;/</code><code>th</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>th</code><code>&gt;First Language&lt;/</code><code>th</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>tr</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>thead</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>tbody</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>tr</code>&nbsp;<code>th:each</code><code>=</code><code>"resident : ${responseEntity.residents}"</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>td</code>&nbsp;<code>th:text</code><code>=</code><code>"${resident.id}"</code><code>&gt;&lt;/</code><code>td</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>td</code>&nbsp;<code>th:text</code><code>=</code><code>"${resident.fullName}"</code><code>&gt;&lt;/</code><code>td</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>td</code>&nbsp;<code>th:text</code><code>=</code><code>"${resident.age}"</code><code>&gt;&lt;/</code><code>td</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>td</code>&nbsp;<code>th:text</code><code>=</code><code>"${resident.gender}"</code><code>&gt;&lt;/</code><code>td</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>td</code>&nbsp;<code>th:text</code><code>=</code><code>"${resident.phoneNumber}"</code><code>&gt;&lt;/</code><code>td</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>td</code>&nbsp;<code>th:text</code><code>=</code><code>"${resident.emailAddress}"</code><code>&gt;&lt;/</code><code>td</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>td</code>&nbsp;<code>th:text</code><code>=</code><code>"${resident.dateOfBirth}"</code><code>&gt;&lt;/</code><code>td</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>td</code>&nbsp;<code>th:text</code><code>=</code><code>"${resident.homeAddress}"</code><code>&gt;&lt;/</code><code>td</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>td</code>&nbsp;<code>th:text</code><code>=</code><code>"${resident.nationality}"</code><code>&gt;&lt;/</code><code>td</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>td</code>&nbsp;<code>th:text</code><code>=</code><code>"${resident.firstLanguage}"</code><code>&gt;&lt;/</code><code>td</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>tr</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>tbody</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>table</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!-- Pagination control --&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!-- Hardcoding the default page-size as 10. User can create a dropdown to select the different page-sizes. --&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class</code><code>=</code><code>"row"</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>th:if="${responseEntity.page['totalPages'] &gt; 1}"&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Total Items: [[${responseEntity.page['totalPages']}]]</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>span</code>&nbsp;<code>th:each</code><code>=</code><code>"i: ${#numbers.sequence(1, responseEntity.page['totalPages'])}"</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>a</code>&nbsp;<code>th:href</code><code>=</code><code>"@{'/residents/paginated/' + ${i} + '/10'}"</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>th:if</code><code>=</code><code>"${responseEntity.page['currentPage'] != i}"</code><code>&gt;[[${i}]]&lt;/</code><code>a</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>span</code>&nbsp;<code>th:unless</code><code>=</code><code>"${responseEntity.page['currentPage'] != i}"</code><code>&gt;[[${i}]]&lt;/</code><code>span</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>span</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>a</code>&nbsp;<code>th:href</code><code>=</code><code>"@{'/residents/paginated/' + ${responseEntity.page['currentPage'] + 1} + '/10'}"</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>th:if</code><code>=</code><code>"${responseEntity.page['currentPage'] &lt; responseEntity.page['totalPages']}"</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Next</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>a</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>span</code>&nbsp;<code>th:unless</code><code>=</code><code>"${responseEntity.page['currentPage'] &lt; responseEntity.page['totalPages']}"</code><code>&gt;Next&lt;/</code><code>span</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>a</code>&nbsp;<code>th:href</code><code>=</code><code>"@{'/residents/paginated/' + ${responseEntity.page['totalPages']} + '/10'}"</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>th:if</code><code>=</code><code>"${responseEntity.page['currentPage'] &lt; responseEntity.page['totalPages']}"</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Last</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>a</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>span</code>&nbsp;<code>th:unless</code><code>=</code><code>"${responseEntity.page['currentPage'] &lt; responseEntity.page['totalPages']}"</code><code>&gt;Last&lt;/</code><code>span</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&lt;/</code><code>div</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&lt;/</code><code>body</code><code>&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;">&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="color:#555555;"><code>&lt;/</code><code>html</code><code>&gt;</code></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

### 5. 运行应用程序 ###

要执行应用程序，请右键单击类。`SpringbootThymeleafPagination.java``Run As -> Java Application`

![format_png 1][]

图 2：运行应用程序

### 6. 项目演示 ###

打开您选择的浏览器并点击以下 URL。结果将以分页方式显示（即较小的块），您可以单击页码以根据页码检索结果。

![format_png 2][]

图3：使用百里香叶在春季启动中进行分页

这就是本教程的全部内容，我希望这篇文章能为您提供所需的任何帮助。快乐学习，不要忘记分享！

### 7. 总结 ###

在本节中，您了解到，

*  Spring Boot，Thymeleaf，龙目岛及其功能，以及分页概念
 *  Spring Boot 中的分页实现并使用 Thymeleaf 在浏览器上显示元素

您可以在“下载”部分中将样例应用程序下载为 Eclipse 项目。

###  8. 下载日食项目 ###

这是使用百里香叶进行Spring Boot分页的一个例子。

下载 您可以在此处**下载**

此示例的完整源代码：[Spring 引导][Spring]

###  8. Keyset 分页 ###

存储库

package com.springboot.thymeleaf.pagination.v2.repository;
    
    import com.springboot.thymeleaf.pagination.v2.model.Resident;
    import java.util.List;
    import org.springframework.data.jpa.repository.Query;
    import org.springframework.data.repository.PagingAndSortingRepository;
    import org.springframework.stereotype.Repository;
    
    @Repository
    public interface ResidentRepository extends PagingAndSortingRepository<Resident, Long> {
    
        @Query(value = "SELECT * FROM resident AS r WHERE r.id > ?1 ORDER BY r.id ASC LIMIT ?2",
                nativeQuery = true)
        List<Resident> fetchAllAscNext(Long id, Long limit);
    
        @Query(value = "SELECT * FROM resident AS r WHERE r.id < ?1 ORDER BY r.id DESC LIMIT ?2",
                nativeQuery = true)
        List<Resident> fetchAllAscPrevious(Long id, Long limit);
    
        @Query(value = "SELECT count(*)  FROM resident", nativeQuery = true)
        public Long fetchCount();
    
        @Query(value = "SELECT min(id)  FROM resident", nativeQuery = true)
        public Long fetchMinId();
    
        @Query(value = "SELECT max(id)  FROM resident", nativeQuery = true)
        public Long fetchMaxId();
    }

控制器

package com.springboot.thymeleaf.pagination.v2.controller;
    
    import com.springboot.thymeleaf.pagination.v2.model.Resident;
    import com.springboot.thymeleaf.pagination.v2.repository.ResidentRepository;
    import com.springboot.thymeleaf.pagination.v2.service.ResidentService;
    import java.util.Collections;
    import lombok.extern.slf4j.Slf4j;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    import java.util.List;
    import org.springframework.web.bind.annotation.RequestParam;
    
    // Causes Lombok to generate a logger field.
    @Slf4j
    @Controller
    public class ResidentController {
    
        private static final int DEFAULT_PAGE_NUMBER = 1;
        private static final int DEFAULT_PAGE_SIZE = 10;
    
        @Autowired
        private ResidentService service;
    
        @Autowired
        private ResidentRepository repository;
    
        @GetMapping(value = "/")
        public String viewIndexPage() {
            log.info("Redirecting the index page to the controller method for fetching the residents in a paginated fashion.");
            return "redirect:residents/paginated/" + DEFAULT_PAGE_NUMBER + "/" + DEFAULT_PAGE_SIZE;
        }
    
        @GetMapping("/residents")
        public String getPaginatedResidents(Model model, @RequestParam(required = false) String keyword, @RequestParam(defaultValue = "next") String dir,
                @RequestParam(defaultValue = "0") Long page,
                @RequestParam(defaultValue = "10") Long size) {
            log.info("Getting the residents in a paginated way for page-number = {} and page-size = {}.", page, size);
            if (dir.equals("next")) {
                List<Resident> fetchAllAscNext = repository.fetchAllAscNext(page, size);
                model.addAttribute("responseEntity", fetchAllAscNext);
                model.addAttribute("max", fetchAllAscNext.get(fetchAllAscNext.size() - 1).getId());
                model.addAttribute("min", fetchAllAscNext.get(0).getId());
            } else {
                List<Resident> fetchAllAscPrevious = repository.fetchAllAscPrevious(page, size);
                Collections.reverse(fetchAllAscPrevious);
                model.addAttribute("responseEntity", fetchAllAscPrevious);
                model.addAttribute("max", fetchAllAscPrevious.get(fetchAllAscPrevious.size() - 1).getId());
                model.addAttribute("min", fetchAllAscPrevious.get(0).getId());
            }
            model.addAttribute("fetchCount", repository.fetchCount());
            model.addAttribute("fetchMinId", repository.fetchMinId());
            model.addAttribute("fetchMaxId", repository.fetchMaxId());
            return "index";
        }
    
    }

视图

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
        <head>
            <meta charset="UTF-8">
            <title>Index page</title>
            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
            <style type="text/css">
                th {
                    text-align: center;
                    font-weight: bold;
                    border-top: none !important;
                }
    
                th, td {
                    white-space: nowrap;
                }
    
                .mt-20 {
                    margin-top: 20px;
                }
    
                .table-alignment {
                    margin-left: -200px;
                }
            </style>
        </head>
        <body>
    
            <div class="container">
                <h3 class="text-info text-center mt-20">Pagination Example : Residents</h3>
    
                <table class="table table-striped table-alignment mt-20 text-center">
                    <thead id="residentsTable">
                        <tr>
                            <th>Id</th>
                            <th>Full name</th>
                            <th>Age</th>
                            <th>Gender</th>
                            <th>Phone Number</th>
                            <th>Email Address</th>
                            <th>Date of Birth</th>
                            <th>Home Address</th>
                            <th>Nationality</th>
                            <th>First Language</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="resident : ${responseEntity}">
                            <td th:text="${resident.id}"></td>
                            <td th:text="${resident.fullName}"></td>
                            <td th:text="${resident.age}"></td>
                            <td th:text="${resident.gender}"></td>
                            <td th:text="${resident.phoneNumber}"></td>
                            <td th:text="${resident.emailAddress}"></td>
                            <td th:text="${resident.dateOfBirth}"></td>
                            <td th:text="${resident.homeAddress}"></td>
                            <td th:text="${resident.nationality}"></td>
                            <td th:text="${resident.firstLanguage}"></td>
                        </tr>
                    </tbody>
                </table>
    
                
                
                <div class="row">
                    <div>
                        <div>
                            Total Items: [[${fetchCount}]]
                        </div>
                        <div>
                            <a th:if="${min > fetchMinId}"
                               th:href="@{'/residents/?page='+${min}+'&size=10&dir=prev'}" >
                                Prev
                            </a>
                            <span th:unless="${min > fetchMinId}">Prev</span>
                        </div>
                        <div>
                            <a th:if="${max < fetchMaxId}"
                               th:href="@{'/residents/?page='+${max}+'&size=10&dir=next'}" >
                                Next
                            </a>
                            <span th:unless="${max < fetchMaxId}">Next</span>
                        </div>
    
                    </div>
                </div>
            </div>
    
        </body>
    
    </html>

[Link 1]: https://www.youtube.com/watch?v=WfyDLiOQmTo
[Link 2]: https://www.youtube.com/watch?v=gsFPXkYDb-s
[format_png]: https://img-blog.csdnimg.cn/img_convert/b90fecd2179956d8aeb85c7be254c682.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/bb99d058080391e003912715f59f1570.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/185f6ba2f068e8866ecb0060ef14629d.webp?x-oss-process=image/format,png
[Spring]: https://examples.javacodegeeks.com/wp-content/uploads/2020/10/SpringbootThymeleafPaginationV2.zip