Spring + Thymeleaf 分页
[英] Spring + Thymeleaf pagination
本文介绍了Spring + Thymeleaf 分页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试建立简单的论坛，但在前端分页有问题.我建立了包含所有主题的页面，例如有 50 个主题，因此为每个页面选择 10 个主题，因此应该获得 5 个页面，其中主题为 150，则应该有 15 个页面.我无法解决如何隐藏显示在列表下方的 1、2、3、4 到 15 页.我只想显示数字 1、当前页面和最后一个数字页面(15).下面的代码适用于少数页面，但如果您有数百个或更多页面，那么此代码将显示数百个页面.
<div类=col-sm-1"><span th:each=i: ${#numbers.sequence(1, totalPages)}"><a th:if="${currentPage != i}";th:href=@{'/topic/page/' + ${i}}">[[${i}]]<span th:unless=${currentPage != i}">[[${i}]]</span> </span>
<div类=col-sm-1"><a th:if="${currentPage <总页数}"th:href=@{'/topic/page/' + ${currentPage + 1}}">Next</a><span th:unless="${currentPage <totalPages}">下一个
<div类=col-sm-1"><a th:if="${currentPage>1}"th:href=@{'/topic/page/' + ${currentPage - 1}}">Previous</a>
<div class="col-sm-1"><a th:if="${currentPage <总页数}"th:href=@{'/topic/page/' + ${totalPages}}">Last</a><span th:unless="${currentPage <totalPages}">Last</span>
有人可以帮我解决这个问题吗?我在前端很弱，不太了解如何解决它;s
解决方案
我遇到了同样的问题，这是我为解决它所做的.我向我的模板传递一个数组，其长度等于页数 + 要显示的当前页面:
model.addAttribute(pages", new int[pageAllGuests.getTotalPages()]);model.addAttribute(currentPage", page);
然后在我的 HTML 页面上，我进行了一些测试以显示或不显示指向该页面的链接:
下面是结果图
分页
这段代码可能会有所改进，但至少它易于阅读和理解.您需要清理代码(href 中的参数)并使其适应您的情况.
I try to build simple forum and i have problem with pagination in front end.
I build page where got all my topics, for example there is 50, so choose 10 topics for every page so should get 5 pages, where topics is 150, there should be 15 pages. Im cannot resolve how to hide this 1, 2, 3, 4, to 15 pages which are display below list. I want to display just number 1, current page and last number page(15). This code below is good for few pages, but if you have hundreds or more then this code will display you hundreds numbers of page.
<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>
</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>
Someone can help me with this? Im weak in front end and not to much understand how to resolve it ;s
解决方案
I had the same problem and here is what I did to solve it.
I pass to my template an array with the length equals to the number of pages + the current page to be displayed:
model.addAttribute("pages", new int[pageAllGuests.getTotalPages()]);
model.addAttribute("currentPage", page);
then on my HTML page I make some tests to display or not the link to the page:
<ul class="pager">
<span th:unless="${currentPage == 0}">
<li><a title="First Page"
th:href="@{admin(status=${status}, jobdescription=${jobdescription},page=0,keyword=${keyword})}"
>«</a>
</li>
<li>
<a title="Previous Page"
th:href="@{admin(status=${status}, jobdescription=${jobdescription},page=${currentPage-1},keyword=${keyword})}"
>‹</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})}"
>›</a>
</li>
<li><a
th:href="@{admin(status=${status}, jobdescription=${jobdescription},page=${pages.length-1},keyword=${keyword})}"
title="Last Page">»</a>
</li>
</span>
</ul>
below is a picture of the result
pagination
This code may probably be improved but at least it is easy to read and understand.
You will need to clean the code (parameters in href) and adapt it to your case.
这篇关于Spring + Thymeleaf 分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
