Spring + Thymeleaf 分页

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>

下面是结果图片

pagination

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