春季+百里香分页

Question

我试图构建一个简单的论坛，但我在前端遇到了分页问题。我在得到我所有主题的地方建立页面，例如有50个，所以为每个页面选择10个主题，所以应该有5个页面，其中主题是150，应该有15个页面。我无法解决如何隐藏列表下面显示的1、2、3、4到15页。我只想显示数字1，当前页面和最后一个数字页面(15(。下面的代码适用于少数页面，但如果您有数百个或更多页面，则此代码将显示数百个页码。

<div th:if = "${totalPages > 1}">
<div class = "row col-sm-10">
<div class = "col-sm-2">
Total topics: [[${totalElements}]]
</div>
<div class = "col-sm-1">
<span th:each="i: ${#numbers.sequence(1, totalPages)}">
<a th:if="${currentPage != i}" th:href="@{'/topic/page/' + ${i}}">[[${i}]]</a>
<span th:unless="${currentPage != i}">[[${i}]]</span>  &nbsp; &nbsp;
</span>
</div>
<div class = "col-sm-1">
<a th:if="${currentPage < totalPages}" th:href="@{'/topic/page/' + ${currentPage + 1}}">Next</a>
<span th:unless="${currentPage < totalPages}">Next</span>
</div>
<div class = "col-sm-1">
<a th:if="${currentPage > 1}" th:href="@{'/topic/page/' + ${currentPage - 1}}">Previous</a>
</div>
<div class="col-sm-1">
<a th:if="${currentPage < totalPages}" th:href="@{'/topic/page/' + ${totalPages}}">Last</a>
<span th:unless="${currentPage < totalPages}">Last</span>
</div>
</div>
</div>

有人能帮我吗？我在前端很弱，不太了解如何解决它；s

Answer 1

我遇到了同样的问题，下面是我解决它的方法。我将一个长度等于页数+要显示的当前页面的数组传递给我的模板：

model.addAttribute("pages", new int[pageAllGuests.getTotalPages()]);
model.addAttribute("currentPage", page);

然后在我的HTML页面上，我进行了一些测试，以显示或不显示页面的链接：

<ul class="pager">
<span th:unless="${currentPage == 0}">
<li><a title="First Page"
th:href="@{admin(status=${status}, jobdescription=${jobdescription},page=0,keyword=${keyword})}"
>&laquo;</a>
</li>
<li>
<a title="Previous Page"
th:href="@{admin(status=${status}, jobdescription=${jobdescription},page=${currentPage-1},keyword=${keyword})}"
>&lsaquo;</a>
</li>
<li th:if="${currentPage>3}">
<a title="Previous Pages" 
th:href="@{admin(status=${status}, jobdescription=${jobdescription},page=${currentPage-3},keyword=${keyword})}"
>...</a>
</li>
</span>
<li th:each="page,i:${pages}" th:class="${i.index==currentPage?'active':''}"  th:if="${i.index > currentPage-4 AND i.index < currentPage+4}" >
<a 
th:href="@{admin(status=${status}, jobdescription=${jobdescription},page=${i.index},keyword=${keyword})}"
th:text="${i.index+1}"> </a>
</li>

<span th:unless="${currentPage == pages.length-1 || pages.length == 0}" >
<li th:if="${currentPage+4<pages.length}">
<a title="Next Pages" 
th:href="@{admin(status=${status}, jobdescription=${jobdescription},page=${currentPage+5},keyword=${keyword})}"
>...</a>
</li>
<li><a title="Next Page"
th:href="@{admin(status=${status}, jobdescription=${jobdescription},page=${currentPage+1},keyword=${keyword})}"
>&rsaquo;</a>
</li>
<li><a 
th:href="@{admin(status=${status}, jobdescription=${jobdescription},page=${pages.length-1},keyword=${keyword})}"
title="Last Page">&raquo;</a>
</li>
</span>
</ul>

下面是结果的图片

分页

这段代码可能会有所改进，但至少它很容易阅读和理解。您需要清理代码(href中的参数(并根据您的情况进行调整。