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

土味儿~

已于 2022-08-28 17:23:13 修改

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 # Bootstrap 文章标签：大数据

于 2022-07-04 17:18:58 首次发布

本文链接：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'}