github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

分页功能实现

This commit is contained in:
liuzhihang 2022-10-19 21:10:02 +08:00
parent b1d60aab5e
commit 1681a9baf8
1 changed files with 79 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
templates/modules/post-list.html
View File

@ -68,34 +68,93 @@
<!-- 页面小于 7 -->
<div class="pagination" th:if="${(totalPages le 7) && (totalPages gt 0)}">
<!--<li th:if="${pageIndex eq 1}" class="page-item disabled">-->
<!-- <a class="page-link" href="#">上一页</a>-->
<!--</li>-->
<!-- 上一页 -->
<a class="extend prev" rel="prev" th:href="${posts.prevUrl}" th:if="${posts.hasPrevious()}">
<i class="fas fa-chevron-left fa-fw"></i>
<div class="pagination_tips_prev">上页</div>
</a>
<!--<li th:if="${pageIndex gt 1}" class="page-item">-->
<!-- <a class="page-link" th:href="${posts.prevUrl}">上一页</a>-->
<!--</li>-->
<!-- th:href="${PostFinder.list(index, posts.size)}" -->
<a class="page-number" data-pjax-state
th:classappend="${index eq pageIndex} ? 'current'"
th:each="index : ${#numbers.sequence(1, totalPages)}"
th:text="${index}">
</a>
<!--<li th:each="index:${#numbers.sequence(1,totalPages)}" th:classappend="${index eq pageIndex}?'active'" class="page-item">-->
<!-- <a th:href="@{/users(pageIndex=${index},size=${size})}" class="page-link" th:text="${index}"></a>-->
<!--</li>-->
<!--<li th:if="${pageIndex eq totalPages}" class="page-item disabled"><a class="page-link" href="#">下一页</a></li>-->
<!--<li th:if="${pageIndex lt totalPages}" class="page-item">-->
<!-- <a class="page-link" th:href="${posts.nextUrl}">下一页</a>-->
<!--</li>-->
<span class="page-number current">1</span>
<a class="page-number" href="page/2/index.html">2</a>
<a class="page-number" href="page/3/index.html">3</a>
<span class="space">&hellip;</span>
<a class="page-number" href="page/33/index.html">33</a>
<!-- 下一页 -->
<a class="extend next" rel="next" th:href="${posts.nextUrl}" th:if="${posts.hasNext()}">
<div class="pagination_tips_next">下页</div>
<i class="fas fa-chevron-right fa-fw"></i>
</a>
</div>
<!-- 页面大于 7 -->
<!-- https://blog.csdn.net/lizc_lizc/article/details/80215147 -->
<div class="pagination" th:if="${totalPages gt 7}">
<!-- 上一页 -->
<a class="extend prev" rel="prev" th:href="${posts.prevUrl}" th:if="${posts.hasPrevious()}">
<i class="fas fa-chevron-left fa-fw"></i>
<div class="pagination_tips_prev">上页</div>
</a>
<!-- 首页 -->
<a class="page-number" data-pjax-state href="/">1</a>
<!-- 当前页面小于等于4 -->
<!-- TODO 需要添加 th:href 跳转地址 -->
<a class="page-number" data-pjax-state
th:classappend="${index eq pageIndex} ? 'current'"
th:each="index:${#numbers.sequence(2,5)}"
th:if="${pageIndex le 4}"
th:text="${index}">
</a>
<!-- TODO 需要添加 th:href 跳转地址 -->
<a class="page-number" data-pjax-state th:if="${pageIndex le 4}">...</a>
<!-- 最后一页与当前页面之差小于等于3 -->
<!-- 需要添加 th:href 跳转地址 -->
<a class="page-number" data-pjax-state th:if="${totalPages - pageIndex le 3}">...</a>
<!-- 需要添加 th:href 跳转地址 -->
<a class="page-number" data-pjax-state
th:classappend="${index eq pageIndex} ? 'current'"
th:each="index : ${#numbers.sequence(totalPages - 4, totalPages - 1)}"
th:if="${totalPages - pageIndex le 3}"
th:text="${index}">
</a>
<!-- 最后一页与当前页面之差大于3 且当前页面大于4 -->
<!-- 需要添加 th:href 跳转地址 -->
<a class="page-number" data-pjax-state th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">...</a>
<!-- 需要添加 th:href 跳转地址 -->
<a class="page-number" data-pjax-state
th:each="index : ${#numbers.sequence(pageIndex - 1,pageIndex + 1)}"
th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}"
th:text="${index}">
</a>
<!-- 需要添加 th:href 跳转地址 -->
<a class="page-number" data-pjax-state th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">...</a>
<!-- 尾页 -->
<!-- 需要添加 th:href 跳转地址 -->
<a class="page-number" data-pjax-state
th:classappend="${index eq pageIndex} ? 'current'"
th:text="${totalPages}">
</a>
<!-- 下一页 -->
<a class="extend next" rel="next" th:href="${posts.nextUrl}" th:if="${posts.hasNext()}">
<div class="pagination_tips_next">下页</div>
<i class="fas fa-chevron-right fa-fw"></i>
</a>
</div>
</nav>
</th:block>