使用thymeleaf模板引擎实现像element-ui一样的分页功能

最新推荐文章于 2023-09-28 15:17:14 发布

w_十二

最新推荐文章于 2023-09-28 15:17:14 发布

阅读量1.6k

点赞数

分类专栏：页码算法文章标签： java

本文链接：https://blog.csdn.net/m0_46608027/article/details/116656815

版权

页码算法专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用thymeleaf模板引擎实现像element-ui一样的分页功能

代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            margin: 0 auto;
            border-collapse: collapse;
            border-spacing: 0;
        }
        tr, td {
            border-bottom: blueviolet 1px solid;
            border-top: blueviolet 1px solid;
        }
        tr:nth-child(odd) {
            background-color: #f2f2f2;
        }
        a {
            text-decoration: none;
            padding: 10px;
        }
        .el-button {
            display: inline-block;
            border-radius: 5px;
            background-color: antiquewhite;
            margin-left: 2px;
            color: black;
        }
        .current_page_active {
            background-color: aqua;
            color: white;
        }
    </style>
</head>
<body>
<div style="text-align: center;">
    <label>用户名：</label><label th:text="${loginUserName}"></label><br>
    <label>E-mail：</label><label th:text="${loginUserEmail}"></label><br>
    <label th:text="#{login.userName}">用户名</label>
    <label>
        <input type="text"/>
    </label><br>
    <label th:text="#{login.password}">密码</label>
    <label>
        <input type="password"/>
    </label><br>
    <a th:href="@{/login/index(language='zh_CN')}">中文</a>
    <a th:href="@{/login/index(language='en_US')}">English</a>

    <div style="text-align: center;">
        <a th:href="@{/user/paging(currentPage=${currentPage} - 1)}"
           th:style="${currentPage} <= 1 ? 'pointer-events: none;' : 'pointer-events: auto;'">上一页</a>
        <!-- 自定义风格的页码 -->
        <a th:each="index : ${pageLink}"
           th:href="@{/user/paging(currentPage=${index})}"
           th:text="${index}"
           th:style="(${currentPage} == ${index}) ? 'color: red' : 'color: green'"></a>
        <a style="margin-left: 10px;"
           th:href="@{/user/paging(currentPage=${currentPage} + 1)}"
           th:style="(${currentPage} >= ${totalPage}) ? 'pointer-events: none;' : 'pointer-events: auto;'">下一页</a><br>
        <!-- Element UI风格的页码 -->
        <a th:each="index : ${pageLink}"
           th:href="@{/user/paging(currentPage=${index})}"
           th:text="${index}"
           th:class="(${currentPage} == ${index}) ? 'el-button current_page_active' : 'el-button'"></a><br>


<!-------------------------- 主要代码如下： start--------------------------->
        <!-- 模仿 Element UI 实现-->
        <a th:href="@{/user/paging(currentPage=1)}"
           th:class="(${currentPage} == 1) ? 'el-button current_page_active' : 'el-button'">1</a>
        <a th:each="index : ${pageLink}"
           th:href="@{/user/paging(currentPage=${index})}"
           th:if="((1 <= ${currentPage} and ${currentPage} <= 4) and (1 < ${index} and ${index} <= 4))"
           th:text="${index}"
           th:class="(${currentPage} == ${index}) ? 'el-button current_page_active' : 'el-button'"></a>

        <a href="#!" class="el-button"
           th:text="'...'"
           th:if="(${currentPage} > 4)"></a>
        <a th:each="index : ${pageLink}"
           th:href="@{/user/paging(currentPage=${index})}"
           th:if="((4 < ${currentPage} and ${currentPage} <= ${totalPage} - 4)
             and (${currentPage} - 1 <= ${index} and ${index} <= ${currentPage} + 1))"
           th:text="${index}"
           th:class="(${currentPage} == ${index}) ? 'el-button current_page_active' : 'el-button'"></a>
        <a href="#!" class="el-button"
           th:text="'...'"
           th:if="(${currentPage} <= ${totalPage} - 4)"></a>

        <a th:each="index : ${pageLink}"
           th:href="@{/user/paging(currentPage=${index})}"
           th:if="((${totalPage} - 4 < ${currentPage} and ${currentPage} <= ${totalPage})
             and (${totalPage} - 4 < ${index} and ${index} < ${totalPage}))"
           th:text="${index}"
           th:class="(${currentPage} == ${index}) ? 'el-button current_page_active' : 'el-button'"></a>
        <a th:href="@{/user/paging(currentPage=${totalPage})}"
           th:text="${totalPage}"
           th:class="(${currentPage} == ${totalPage}) ? 'el-button current_page_active' : 'el-button'"></a>
<!-------------------------- end --------------------------->
        <table>
            <tr th:each="user : ${userInfoList}">
                <td th:text="${user.userId}"></td>
                <td th:text="${user.userName}"></td>
                <td th:text="${user.email}"></td>
                <td th:text="${user.sexFlg} ? '男' : '女'"></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

实现效果：
前四页效果
中间也效果
后四也效果
Element UI的效果进入下面的官网查看：
https://element.eleme.cn/#/zh-CN/component/pagination

w_十二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用thymeleaf模板引擎实现像element-ui一样的分页功能

使用thymeleaf模板引擎实现像element-ui一样的分页功能代码如下：<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org" lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> table { marg
复制链接

扫一扫