一套方便实用的分页设计方案 Bootstrap5 + Thymeleaf

已于 2022-08-28 17:23:13 修改
阅读量1.3k 收藏 6
点赞数 1
分类专栏： 前端 # Bootstrap 文章标签： 大数据
于 2022-07-04 17:18:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tu_wer/article/details/125604505
版权

一、设计目的

  • 可以方便地进入 第一页、最后页
  • 可以方便地进入 当前活动页 的 前两页、后两页
  • 可以根据 总页数 及 当前活动页 自动地排版页码

二、设计方案

在这里插入图片描述

  • 总页数小于8时，显示全部页
  • 总页数大于等于8时，继续判断当前活动页
    • 当前活动页小于5时，显示左侧6页，再加最后页
    • 当前活动页大于等于5，且小于等于倒数第5页时，显示第1页，中间连续5页，最后页；（中间5页中，最中间是当前活动页，两侧分别是前2页、后2页）
    • 当前活动页大于倒数第5页时，显示第1页，最后连接6页

三、效果展示

1、基本样式

在这里插入图片描述

2、pages < 8

显示全部页

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3、pages >= 8

3.1、current < 5

在这里插入图片描述

在这里插入图片描述

3.2、5 <= current <= 倒数第5页

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3.3、current > 倒数第5页

在这里插入图片描述

在这里插入图片描述

四、thymeleaf 模块引用

1、分页菜单模块

需要接收5个参数：

  • baseUrl：菜单链接的基础路径
  • pages：总页数
  • current：当前页
  • pageSize：页面最大记录数
  • rows：总记录数

链接样式：/ baseUrl / current / pageSize

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>公共页面</title>
</head>
<body>
<!--分页菜单：需要传递5个参数-->
<div class="row d-inline-flex" th:fragment="page(baseUrl,pages,current,pageSize,rows)">
    <!--没有数据：总页数小于1-->
    <th:block th:if="${pages < 1}">
        <div class="col mx-2 text-secondary text-nowrap">
            暂无数据
        </div>
    </th:block>
    <!--有数据：只有1页-->
    <th:block th:if="${pages == 1}">
        <div class="col mx-2 text-secondary text-nowrap">
            共有 <span th:text="${rows}"/> 条数据
        </div>
    </th:block>
    <!--有数据：总页数大于1-->
    <th:block th:if="${pages > 1}">
        <ul class="col pagination mt-3 ms-4">
            <!--总页数小于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="@{|/${baseUrl}/${page}/${pageSize}|}" 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="@{|/${baseUrl}/${page}/${pageSize}|}" th:text="${page}" th:title="|第${page}页|"></a>
                        </li>
                    </th:block>
                    <!--5、6页-->
                    <li class="page-item">
                        <a class="page-link" th:href="@{|/${baseUrl}/${5}/${pageSize}|}" title="第5页">5</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" th:href="@{|/${baseUrl}/${6}/${pageSize}|}" title="第6页">6</a>
                    </li>
                    <!--分隔符-->
                    <li class="page-item mx-2" disabled="">...</li>
                    <!--最后页-->
                    <li class="page-item">
                        <a class="page-link" th:href="@{|/${baseUrl}/${pages}/${pageSize}|}" 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="@{|/${baseUrl}/${1}/${pageSize}|}" title="第1页">1</a>
                        </li>
                        <!--分隔符-->
                        <li class="page-item mx-2" disabled="">...</li>
                        <!--中间5页-->
                        <li class="page-item">
                            <a class="page-link" th:href="@{|/${baseUrl}/${current - 2}/${pageSize}|}" th:text="${current - 2}" th:title="|第${current - 2}页|"></a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" th:href="@{|/${baseUrl}/${current - 1}/${pageSize}|}" th:text="${current - 1}" th:title="|第${current - 1}页|"></a>
                        </li>
                        <li class="page-item active">
                            <a class="page-link" th:href="@{|/${baseUrl}/${current}/${pageSize}|}" th:text="${current}" th:title="|第${current}页|"></a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" th:href="@{|/${baseUrl}/${current + 1}/${pageSize}|}" th:text="${current + 1}" th:title="|第${current + 1}页|"></a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" th:href="@{|/${baseUrl}/${current + 2}/${pageSize}|}" 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="@{|/${baseUrl}/${pages}/${pageSize}|}" 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="@{|/${baseUrl}/${1}/${pageSize}|}" 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="@{|/${baseUrl}/${page}/${pageSize}|}" th:text="${page}" th:title="|第${page}页|"></a>
                            </li>
                        </th:block>
                    </th:block>
                </th:block>
            </th:block>
        </ul>
        <div class="col mx-2 mt-4 text-secondary text-nowrap">
            共有 <span th:text="${rows}"/> 条数据
        </div>
    </th:block>
</div>
</body>
</html>

2、引用分页菜单模块

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--标题-->
    <title>test</title>
    <!--基础路径-->
    <base th:href="${#request.getContextPath()}+'/'">
    <!--CSS-->
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet">
</head>
<body>
    <!--页面内容-->
    <div class="container">
        <!--分页菜单-->
        <div th:replace="~{commons/commons::page('test',${pages},${current},${pageSize},${rows})}"></div>
    </div>  
</body>
</html>

3、效果图

在这里插入图片描述

土味儿~
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
thymeleaf菜鸟教程_使用Spring数据和Thymeleaf实现Bootstrap分页
cunhui1209的博客
12-06 597
thymeleaf菜鸟教程 Twitter Bootstrap具有非常好的分页UI ，在这里我将向您展示如何使用Spring Data Web分页功能和Thymeleaf条件评估功能来实现它。 引导程序中的标准分页 受Rdio启发的简单分页，非常适合应用程序和搜索结果。 大块很难错过，易于扩展，并提供较大的点击区域。 从Bootstrap文档显示分页的原始源代码非常简单： <...
Spring+SpringMVC+Mybatis分布式敏捷开发系统架构
weixin_70730532的博客
06-07 1282
项目不仅仅是一个开发架构，而是努力打造一套从 前端模板 - 基础框架 - 分布式架构 - 开源项目 - 持续集成 - 自动化部署 - 系统监测 - 无缝升级 的全方位J2EE企业级开发解决方案。基于Spring+SpringMVC+Mybatis分布式敏捷开发系统架构，提供整套公共微服务服务模块：内容管理、支付中心、用户管理（包括第三方）、微信平台、存储系统、配置中心、日志分析、任务和通知等，支持服务治理、监控和追踪，努力为中小型企业打造全方位J2EE企业级开发解决方案。 技术选型 后端技术:前端技术
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面（看评论酌情下载）
12-07
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面（看评论酌情下载）
SpringBoot学习（五）——————Thymeleaf +bootstrap 分页
weixin_55220613的博客
06-11 1860
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 本篇主要记录，我在学习springboot的过程中，通过Thymeleaf和Bootstrap样式进行分页的相关操作，留做记录。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd im
Bootstrap+Thymeleaf+Sping boot+Mybatis整合
weixin_42392626的博客
11-20 1146
Bootstrap+Thymeleaf+Sping boot+Mybatis整合 一、环境配置 IDE:Intellij IDEA 2018.2 JDK:1.8.0_181 maven：4.0.0 Spring boot:2.0.4 mybatis-generator-core-1.3.7 ** 1. pom.xml导入相关依赖 &amp;amp;amp;amp;amp;amp;amp;lt;?xml version=&amp;amp;amp;amp;amp;amp
spring boot+bootstrap+thymeleaf
04-10
自己整理的spring boot+bootstrap+thymeleaf的模板，传统erp或者管理后台的样式，简单好用。
thymeleaf+bootstrap，onclick传参实现模态框中遇到的错误
weixin_34199335的博客
01-07 614
onclick调javascript函数时，不能直接使用onclick=“editUser(${prod.id})”，这样会报错，需要修改成如下的格式。 <a href="#editModal" role="button" data-toggle="modal" th:onclick="'javascript:editUser('+${prod...
BootStrap5+Thymeleaf完成类似浏览器的多窗口效果
weixin_42475817的博客
07-02 959
上一份博客：https://blog.csdn.net/weixin_42475817/article/details/114626517 主要通过ajax动态插入html完成，这样有个弊端，就是每次都需要手动编写初始化函数，所以这次将主要窗体改用<ifram>标签
13Bootstrap5分页
醉瑾_的博客
12-10 976
13Bootstrap5分页 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5分页</title> <link rel="sty
ssm框架整合(springMVC + spring + MyBatis，)
07-27
总的来说，SSM框架整合是一个强大且灵活的解决方案，它结合了Spring的控制反转和面向切面编程，SpringMVC的MVC设计模式，以及MyBatis的简单SQL操作，为Java Web开发提供了一套完整的框架。结合Bootstrap和Maven，...
spring-boot2.0 thymeleaf bootstrap 整合示例
09-03
spring-boot2.0 thymeleaf bootstrap 整合的一个示例项目，使用idea开发。步骤如下： 首先在idea或者eclipse(STS)中新建springboot项目，在选择依赖（Dependences）时引入web和thymeleaf。 接着我们将新建需要用到的3个文件，模拟真实开发过程中mvc这块内容。 需要新建的文件有实体类 Article.java，控制器 SiteController.java，页面 index.html。
Spring Boot+Mybatis-Plus+Thymeleaf+Bootstrap分页页查询（前后端都有）.zip
05-08
前端html分页逻辑是手写的，用的是Thymeleaf模板引擎，后端用的是mybatis plus的内置分页功能
阅山科技架构设计1
08-08
视图层选择了Bootstrap 3.3、Hplus 4.1和Thymeleaf 3.0，提供了一套完全响应式的布局，适应不同设备的显示需求。系统还具备一键生成功能，能够快速生成控制器、模型、视图和菜单等代码，提高了开发效率。 在数据源...
java+mysql网上商城项目源码 前台+后台
03-19
- **Spring Security**：提供了一套完整的权限控制方案，包括登录验证、权限分配等。 6. **支付接口**： - 可能集成了第三方支付接口，如支付宝、微信支付，实现在线支付功能。 7. **物流接口**： - 可能对接了...
天工开物 #2 Spring Boot + Next.js 端口唯一代码分离方案
Miracle
10-22 2285
上周开发报表的时候实现了一个Spring Boot[1]+Next.js[2]前后端代码分离，但是端口唯一的 WebApp 方案。这个方案既能利用好各自的生态，也能避免要起两个 server 占用两个端口的繁琐构建部署逻辑。本文从选型到实现做一个分享，主要面向熟悉 Spring Boot 技术栈，又想跟进 React 系前端组件化方案的开发者。选型对比基本的目标是要做一个数据展示的网页应用...
springboot bootstrap和thymeleaf的使用
weixin_30938149的博客
07-11 976
最近想用springboot自己用业余时间写一个网站，发现坑很多，遇到很多问题，包括前端和后端，前端的基础太不扎实了，还有很多内容需要进一步学习。 这里转一篇bootstrap和thymeleaf在springboot的使用 Spring Boot项目的默认模板引擎是Thymeleaf，这没什么好说的，个人觉得也非常好，因为这款引擎可以前后端同时开发，类似th:xxx这样的内联标签属性...
Thymeleaf+bootstrap实现简单分页
热门推荐
Lynn_coder的博客
04-12 1万+
做项目时候，想找一个简单的分页代码，懒得用前端框架和json，没找到，就自己写了一份简单的需要从后台传两个变量：indexPage（当前页数）totalPage（一共页数）效果图如下：总体思路是以当前页为中心，左边三个按钮右边三个按钮，挨个判断+页数和-页数时有没有超出范围在第一页和最后一页时需要做一个判断，如果当前页等于1时，上一页按钮失效，当前页等于总页数时，最后一页失效最后上代码：模板代码基...
CI 漂亮的分页样式（页码样式）
LX_96的博客
07-20 9626
还在为难看的分页发愁吗，下面教你如何用CI编写漂亮的分页 demo:(本人用bootstrap分页样式，你可以根据个人喜好定义自己的class）: 一、决定样式的配置： 1. $config['num_links'] = 2; 放在你当前页码的前面和后面的“数字”链接的数量。比方说值为 2 就会在每一边放置两个数字链接， 就像此页顶端的示例链接那样。 2. 如果你
spring boot系列02--Thymeleaf+Bootstrap构建页面
weixin_30764883的博客
11-21 217
上一篇说了一下怎么构建spring boot 项目 接下来我们开始讲实际应用中需要用到的 先从页面说起 页面侧打算用Thymeleaf+Bootstrap来做 先共通模板页 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.o...
springboot+thymeleaf+bootstrap
最新发布
09-12
Spring Boot是一个基于Java的开源框架，用于快速构建独立的、可运行的、生产级别的Spring应用程序。它简化了Spring应用程序的配置和部署过程，提供了许多开箱即用的功能，例如自动配置、内嵌服务器等，使得开发者可以更专注于业务逻辑的实现。 Thymeleaf是一种服务器端的Java模板引擎，用于渲染网页。它与Spring Boot框架集成非常紧密，能够直接在网页中使用Spring Boot的各种功能，例如表单处理、URL生成等。Thymeleaf语法简洁易懂，具有良好的可读性和可维护性，适合用于构建复杂的动态网页。 Bootstrap是一个流行的前端框架，用于开发响应式网页和Web应用程序。它提供了丰富的CSS和JavaScript组件，可以快速构建美观的用户界面。Bootstrap的特点是简洁、灵活、易于定制，并且具有良好的跨浏览器兼容性。在Spring Boot和Thymeleaf中使用Bootstrap可以方便地创建具有良好用户体验的网页。 综上所述，Spring Boot与Thymeleaf和Bootstrap的结合可以实现快速、高效地开发和部署具有良好用户体验的Web应用程序。Spring Boot提供了开箱即用的功能，Thymeleaf提供了灵活且易于维护的网页渲染，Bootstrap提供了丰富的组件和美观的样式。使用这三个工具可以极大地提升开发效率和用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

土味儿~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值