使用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