feat(pagination): 修改分页展示方式,#51

This commit is contained in:
nineya 2023-10-17 16:19:30 +08:00
parent 6dcec4eeda
commit 6867445af9
3 changed files with 30 additions and 9 deletions

View File

@ -3724,10 +3724,12 @@ button.swiper-pagination-bullet {
height: 2.25em;
box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
display: inline-flex;
}
a {
color: var(--dark-c);
}
&-ellipsis {
color: var(--dark-d);
margin: 0.25rem;
padding: 0 0.5em;
}
}

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
<div xmlns:th="https://www.thymeleaf.org"
<div xmlns:th="https://www.thymeleaf.org" xmlns:tj="http://www.w3.org/1999/html"
th:fragment="pagination (data, path)"
th:if="${data.totalPages > 1}"
class="card card-transparent">
@ -9,11 +9,30 @@
th:class="'pagination-next' + ${data.hasNext()?'':' is-invisible is-hidden-mobile'}">下一页</a>
<ul class="pagination-list is-hidden-mobile"
th:with="p=${T(java.lang.Math).ceil(T(java.lang.Double).parseDouble(data.page) / 5.0) },start = ${(p * 5) - 5 +1 }, end=${p * 5}">
<th:block th:if="${posts.totalPages <= 9}">
<li th:each="index : ${#numbers.sequence(1, data.totalPages)}">
<a
th:class="'pagination-link' + ${data.page == index ? ' is-current': ''}"
th:href="@{${path+'/page/'} + ${index}}" th:text="${index}"></a>
</li>
</th:block>
<th:block th:unless="${posts.totalPages <= 9}"
th:with="start = ${(data.page > 5) ? data.page - 2 : 1},
end = ${start + ((data.page > 5) ? ((posts.page < posts.totalPages - 4) ? 4 : 6) : ((posts.page < posts.totalPages - 4) ? 6 : 8))}">
<th:block th:if="${posts.page > 5}">
<li><a class="pagination-link" th:href="@{${path+'/page/1'}}" th:text="1"></a></li>
<li><span class="pagination-ellipsis"></span></li>
</th:block>
<li><a
th:each="index : ${#numbers.sequence(start, (data.totalPages > 5) ? end : data.totalPages)}"
th:class="'pagination-link' + ${data.page == index ? ' is-current': ''}"
th:href="@{${path+'/page/'} + ${index}}" th:text="${index}"></a></li>
<li th:each="index : ${#numbers.sequence((end > posts.totalPages) ? start - end + posts.totalPages : start, (end > posts.totalPages) ? posts.totalPages : end)}"><a
th:class="'pagination-link' + ${data.page == index ? ' is-current': ''}"
th:href="@{${path+'/page/'} + ${index}}" th:text="${index}"></a></li>
<th:block th:if="${posts.page < posts.totalPages - 4}">
<li><span class="pagination-ellipsis"></span></li>
<li><a class="pagination-link" th:href="@{${path+'/page/'} + ${posts.totalPages}}" th:text="${posts.totalPages}"></a></li>
</th:block>
</th:block>
</ul>
</nav>
</div>