Thymeleaf+Bootstrap封装分页组件

已于 2024-08-22 14:40:57 修改
阅读量920 收藏 24
点赞数 22
文章标签： bootstrap 分页 thymeleaf 模板
于 2024-08-21 13:52:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liygheart/article/details/141391512
版权

效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码

templates/components/pagination.html

<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<body>
<div class="d-flex justify-content-between align-items-center mb-3" th:fragment="pagination(current,pageSize,rows,path)">
    <th:block th:with="pages = ${rows%pageSize==0?rows/pageSize:rows/pageSize+1}">
        <div>共 <span th:text="${pages}"/> 页 <span th:text="${rows}"/> 条数据</div>
        <div>
            <!--有数据：总页数大于1-->
            <th:block th:if="${pages >= 1}">
                <ul class="col pagination mb-0">
                    <li class="page-item" th:classappend="${current == 1} ? 'disabled'">
                        <a class="page-link" th:href="@{${path}(pageNo=${current - 1})}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    <!--总页数小于8-->
                    <th:block th:if="${pages < 8}" th:each="page:${#numbers.sequence(1,pages)}">
                        <li th:class="${page == current ? 'page-item active':'page-item'}">
                            <a class="page-link" th:href="@{${path}(pageNo=${page})}" th:text="${page}" th:title="|第${page}页|"></a>
                        </li>
                    </th:block>
                    <!--总页数大于等于8-->
                    <th:block th:if="${pages >= 8}">
                        <!--当前页小于5-->
                        <th:block th:if="${current < 5}">
                            <!--前4页-->
                            <th:block th:each="page:${#numbers.sequence(1,4)}">
                                <li th:class="${page == current ? 'page-item active':'page-item'}">
                                    <a class="page-link" th:href="@{${path}(pageNo=${page})}" th:text="${page}" th:title="|第${page}页|"></a>
                                </li>
                            </th:block>
                            <!--5、6页-->
                            <li class="page-item">
                                <a class="page-link" th:href="@{${path}(pageNo=5)}" title="第5页">5</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" th:href="@{${path}(pageNo=6)}" title="第6页">6</a>
                            </li>
                            <!--分隔符-->
                            <li class="page-item mx-2" disabled="">...</li>
                            <!--最后页-->
                            <li class="page-item">
                                <a class="page-link" th:href="@{${path}(pageNo=${pages})}" th:text="${pages}" th:title="|第${pages}页|"></a>
                            </li>
                        </th:block>
                        <!--当前页大于等于5-->
                        <th:block th:if="${current >= 5}">
                            <!--当前页小于等于倒数第5-->
                            <th:block th:if="${current <= pages - 5}">
                                <!--第1页-->
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=1)}" title="第1页">1</a>
                                </li>
                                <!--分隔符-->
                                <li class="page-item mx-2" disabled="">...</li>
                                <!--中间5页-->
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=${current - 2})}" th:text="${current - 2}" th:title="|第${current - 2}页|"></a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=${current - 1})}" th:text="${current - 1}" th:title="|第${current - 1}页|"></a>
                                </li>
                                <li class="page-item active">
                                    <a class="page-link" th:href="@{${path}(pageNo=${current})}" th:text="${current}" th:title="|第${current}页|"></a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=${current + 1})}" th:text="${current + 1}" th:title="|第${current + 1}页|"></a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=${current + 2})}" th:text="${current + 2}" th:title="|第${current + 2}页|"></a>
                                </li>
                                <!--分隔符-->
                                <li class="page-item mx-2" disabled="">...</li>
                                <!--最后页-->
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=${pages})}" th:text="${pages}" th:title="|第${pages}页|"></a>
                                </li>
                            </th:block>
                            <!--当前页大于倒数第5-->
                            <th:block th:if="${current > pages - 5}">
                                <!--第1页-->
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=1)}" title="第1页">1</a>
                                </li>
                                <!--分隔符-->
                                <li class="page-item mx-2" disabled="">...</li>
                                <!--后6页-->
                                <th:block th:each="page:${#numbers.sequence(pages - 5,pages)}">
                                    <li th:class="${page == current ? 'page-item active':'page-item'}">
                                        <a class="page-link" th:href="@{${path}(pageNo=${page})}" th:text="${page}" th:title="|第${page}页|"></a>
                                    </li>
                                </th:block>
                            </th:block>
                        </th:block>
                    </th:block>
                    <li class="page-item" th:classappend="${current == pages} ? 'disabled'">
                        <a class="page-link" th:href="@{${path}(pageNo=${current + 1})}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </th:block>
        </div>
    </th:block>
</div>
</body>
</html>

使用

<div th:replace="~{components/pagination::pagination(${page.current}, ${page.size}, ${page.total}, @{/admin/user/list(name=${name},email=${email},inTime1=${inTime1},inTime2=${inTime2})})}"></div>
cshe
关注
  • 22
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web/java/spring boot/thymeleaf/jsp开发之分页功能实现的常用方式
空空说技术的博客
12-23 3932
web开发之分页功能实现的常用方式 本文主要写分页功能实现的常用方式，主要讲项目开发中快速使用的方式。适合那些只想快点实现技术而不用深入研究的人群。搞后端的你，哪天让你来搞前端了呢？ 我主要写一些关键点和快速实现，有时候做项目要快撒。所以把一些常用的方法总结写下，后期我做起来就直接复制粘贴就好。 本文是我项目开发中总结下来的，针对那种想要快速实现功能，而不是研究原理的，那你就直接复制我的东西，运行...
Springboot +JPA+thymeleaf+MySQL+BootStrap制作订单管理系统
m0_74213625的博客
07-05 646
2.model模型层 3.repository层 此层只定义了一个接口，而且此接口继承了JpaRepository接口,JpaRepository接口内有很多方法，可供接下来的使用，因为JpaRepository接口里并不一定有我想要的功能的方法，这里我创建了一个模糊查询，可以通过status状态这个属性，查询到相关的所有信息 4.service 业务层 业务层分别有两部分，一个是接口，一个是接口的实现类接口里负责构建方法，但没有实体，方法的实体由继承此接口的类重写，每个方法指定要实现什么功能 4.2 O
Spring Boot+Mybatis-Plus+Thymeleaf+Bootstrap分页页查询（前后端都有）.zip
05-08
前端html分页逻辑是手写的，用的是Thymeleaf模板引擎，后端用的是mybatis plus的内置分页功能
SpingBoot-Thymeleaf-bootstrapTable-分页之Service
weixin_33850890的博客
04-25 154
JAVA: public Map getPage(final Map searchParameters, String salt) { Map map = new HashMap(); int page = 0; int pageSize = 10; Page<User> pageL...
Spring boot Mybatis Thymeleaf Bootstrap页面布局和表格分页
lillllllll的专栏
10-19 3842
本文主要给出了一个用Bootstrap实现表格分页的方案，也实现了基本的页面布局例子。 软件开发中分页是常用的，写一个分页控件虽然不难但是也比较麻烦。分页的基本原理是将数据库表中的数据以分页的形式显示在页面表格中，做法是以当前页码为基准点的一个固定长度的滑动窗口来显示若干页面，滑动窗口以外的页面用省略号（....）表示，见图1。图1中显示的是导航控件，控件中每个小格子装的是一个<a>...
SpingBoot-Thymeleaf-bootstrapTable-分页之H5
weixin_34244102的博客
04-25 1104
H5 //初始化页数$('#userListTable').bootstrapTable({url : 'sys/user-list.json',method : 'post', //请求方式（）dataType : 'json',contentType : "application/x-www-form-urlencoded",showExport : true, //是否显示导出按钮expor...
bootstrap table+spring boot + mybatis实现分页加载
lucky9322的专栏
02-28 2831
前端bootstrap table，后端spring boot + mybatis实现分页加载。 效果如下 数据库数据配置 Navicat Premium Data Transfer Source Server : localhost Source Server Type : MySQL Source Server Version : 80012 Sourc...
基于javaweb的在线电子商城管理系统(java+springboot+thymeleaf+bootstrap+jq+layui+mysql)
m0_68551656的博客
10-23 668
基于javaweb的在线电子商城管理系统(java+springboot+thymeleaf+bootstrap+jq+layui+mysql) 运行环境 Java≥8、MySQL≥5.7 开发工具 eclipse/idea/myeclipse/sts等均可配置运行 适用 课程设计，大作业，毕业设计，项目练习，学习演示等 功能说明 ![20220519002245](https://pic1.imgdb.cn/files/52560/project20/20220
Bootstrap5.0 完美翻页方案 Spring boot + Thymeleaf 实现
totemtec的博客
04-26 1224
废话不多说，上效果图： 最重要的哈，Show me the code Controller代码主要是接收翻页参数，组织翻页数据，使用了Spring MVC和Spring Data提供的工具类。 代码如下： @Controller public class UserController { private static final int DEFAULT_CURRENT = 1; private static final int DEFAULT_PAGE_SIZE = 10;
基于javaweb的在线订餐系统(java+springboot+thymeleaf+html+bootstrap+ajax+mysql)
m0_68552069的博客
10-26 1100
基于javaweb的在线订餐系统(java+springboot+thymeleaf+html+bootstrap+ajax+mysql) 运行环境 Java≥8、MySQL≥5.7 开发工具 eclipse/idea/myeclipse/sts等均可配置运行 适用 课程设计，大作业，毕业设计，项目练习，学习演示等 功能说明
通过Springboot +JPA+thymeleaf+MySQL+BootStrap写一个具有增删改查的系统
zzhq11的博客
07-05 262
在这里我们需要创建一个端口和一个执行层，端口里面是将我们写好的增删改查创造一个方法也是创造出一个参数让我们的执行层更加的好写，然后在IMpl中我们写了增删改查查询与分页的方法然后将Service传给我们的控制层去执行这些方法。最后终于等到我们的控制层 ，其实在写整个项目的时候也是用了很多的时间，要将一个个的功能去一一实现然后才能往下面去写，比如在查询的时候就卡了很多天，通过上网查询的方式看别人是怎么写查询的方法。在这里面我们添加了在我们后面需要用的查询方法 通过模糊查询的方式在我们的主页面进行位置的查询。
spring boot 中thymeleaf 分页（上一页，下一页，首页，尾页）
热门推荐
fengcai0123的专栏
03-12 2万+
controller @GetMapping(value = "/page") public String findGoodsPage(Model model, @RequestParam(value="pageNum") String pageNum){ Page&lt;Goods&gt; pages=goodsService.findGoodsNoCriteria(Integer.pa...
Thymeleaf+bootstrap实现简单分页
Lynn_coder的博客
04-12 1万+
做项目时候，想找一个简单的分页代码，懒得用前端框架和json，没找到，就自己写了一份简单的需要从后台传两个变量：indexPage（当前页数）totalPage（一共页数）效果图如下：总体思路是以当前页为中心，左边三个按钮右边三个按钮，挨个判断+页数和-页数时有没有超出范围在第一页和最后一页时需要做一个判断，如果当前页等于1时，上一页按钮失效，当前页等于总页数时，最后一页失效最后上代码：模板代码基...
餐厅点餐系统springboot.zip
09-10
开发一个基于Spring Boot的餐厅点餐系统可以大大提高餐厅的服务效率和顾客体验。下面是一个简单的案例程序，展示了如何使用Spring Boot来构建这样一个系统。这个系统将包括用户管理、菜单管理、订单管理等基本功能。 1. 创建项目 首先，通过Spring Initializr（https://start.spring.io/）创建一个新的Spring Boot项目，并添加必要的依赖项，如Web、Thymeleaf、Spring Data JPA 和 MySQL Driver。
MATLAB_SIMULINK中的病毒传播模拟器.rar
09-10
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Sigrity-Sigrity MCP Specification.rar
最新发布
09-10
Sigrity-Sigrity MCP Specification.rar 当引脚名称映射失败时，通过坐标映射为替代引脚映射方法添加可选的引脚坐标（相对于元件原点）。 本文档描述了信号模型连接协议（MCP）。 MCP用于在管芯（芯片）、封装和PCB之间连接电路模型和/或物理布局。 MCP允许任何MCP型号的Sigrity产品内的自动模型和结构连接。 它还允许第三方工具将Sigrity模型与MCP集成或连接。 MCP使用简单的ASCII格式，支持模型连接的多个电路和引脚，并允许将物理引脚集中在电路模型中。 MCP具有可扩展性和向后兼容性。
智能优化算法-樽海鞘优化算法（SSA）
09-10
樽海鞘优化算法 (Salp Swarm Algorithm, SSA) 虽然名称中提到的是“樽海鞘”，但实际上这个算法是基于群体智能的一种元启发式优化算法，它模拟了樽海鞘（Salps）在海洋中的游动和觅食行为，用于解决复杂的优化问题。 SSA的工作机制主要包括以下几个方面： 链式游动：模拟樽海鞘在海洋中形成链状结构进行集体游动，用于探索解空间。 觅食行为：通过模拟樽海鞘的觅食行为，促进算法的局部搜索能力。 动态调整：根据当前搜索状态动态调整搜索策略，平衡全局搜索和局部搜索。 优点包括： 强大的探索能力：SSA能够有效地探索解空间的不同区域。 灵活性：适用于多种优化问题，包括连续和离散优化。 快速收敛：通常能够在较少迭代次数内找到较好的解。 易于实现：算法设计直观，易于编程实现。
CNG油改气 150+155+2.0+调试软件
09-10
CNG油改气 150+155+2.0+调试软件
为什么消费者喜欢生成式人工智能（英）(1).pdf
09-10
为什么消费者喜欢生成式人工智能（英）(1).pdf
springboot+thymeleaf+bootstrap
09-12
Spring Boot是一个基于Java的开源框架，...Spring Boot提供了开箱即用的功能，Thymeleaf提供了灵活且易于维护的网页渲染，Bootstrap提供了丰富的组件和美观的样式。使用这三个工具可以极大地提升开发效率和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值