Spring + Thymeleaf - 如何实现列表的分页

Question

我正在使用 Spring + Thymeleaf 开发一个简单的应用程序。在其中一个页面上，我有一个需要分页的项目列表。

理想情况下，我只想发送 currPageNo (当前页码)和numOfPages (总页数) View 变量和其余工作将在那里完成(这是一个演示问题，与业务逻辑无关)。但是，如果最干净的解决方案需要我首先在 Controller 中进行一些计算，我会接受它作为一个小问题。

我想获取以下形式的页面列表。

<Prev | 1 | ... | 3 | 4 | 5 | 6 | 7 | ... | 15 | Next>

我只能提供以下解决方案。它有效，但我相信您会同意它非常困惑且非常难以阅读。

此外，除了currPageNo和 numOfPages我不得不向 View 发送另外两个变量。理想的解决方案不需要我这样做。

firstPageNo = Math.max(2, currPageNo - 2)
lastPageNo = Math.min(numOfPages - 1, currPageNo + 2)

我的代码的当前版本如下。

<ul>
    <li th:if="${currPageNo &gt; 1}">
        <a th:href="@{/items.html(pageNo = ${currPageNo - 1})}" href="">&lt; Prev</a>
    </li>
    <li th:class="${currPageNo == 1} ? 'selected'">
        <a th:href="@{/items.html(pageNo = 1)}" th:if="${currPageNo &gt; 1}" href="">1</a>
        <span th:if="${currPageNo == 1}">1</span>
    </li>
    <li th:if="${currPageNo &gt;= 5}">
        ...
    </li>
    <li th:each="pageNo : ${#numbers.sequence(firstPageNo, lastPageNo)}"  th:class="${currPageNo == pageNo} ? 'selected'">
        <a th:href="@{/items.html(pageNo = ${pageNo})}" th:if="${pageNo != currPageNo}" th:text="${pageNo}" href="">2</a>
        <span th:if="${pageNo == currPageNo}" th:text="${pageNo}">2</span>
    </li>
    <li th:if="${currPageNo &lt;= (numOfPages - 4)}">
        ...
    </li>
    <li th:class="${currPageNo == numOfPages} ? 'selected'">
        <a th:href="@{/items.html(pageNo = ${numOfPages})}" th:if="${currPageNo &lt; numOfPages}" th:text="${numOfPages}" href="">10</a>
        <span th:if="${currPageNo == numOfPages}" th:text="${numOfPages}">1</span>
    </li>
    <li th:if="${currPageNo &lt; numOfPages}">
        <a th:href="@{/items.html(pageNo = ${currPageNo + 1})}" href=""> Next &gt;</a>
    </li>
</ul>

以下列表总结了我最想摆脱的问题。我知道其中一些是平台固有的，但列表似乎很长而且代码很乱。

• 必须发送 firstPageNo 的预计算值和 lastPageNo从 Controller 到 View 。
• 必须使用<而不是 <在表达式中。
• 必须同时使用具有互斥条件的 anchor 和跨度，以使浏览器不使用当前页面的链接。

我也欢迎任何其他关于如何提高代码质量的建议。

---

我知道这个问题可能更适合 Code Review 网站，但是，由于 Thymeleaf 似乎是一项用户群很小的技术，我希望在 Stack Overflow 上得到一个合理的答案，它有一个更大的用户群(我相信)。

但是，如果这里确实不欢迎这样的问题，请考虑将其移至正确的站点而不是关闭它，以便我获得所需的建议。

Answer 1

类似于中描述的解决方案 http://www.javacodegeeks.com/2013/03/implement-bootstrap-pagination-with-spring-data-and-thymeleaf.html

但不使用 Spring Pageable 的包装器

<div class="table-pagination">
    <ul class="pagination">
        <li th:class="${contactsPage.number eq 0} ? 'disabled' : ''">
            <a th:if="${not contactsPage.firstPage}" th:href="@{${'/contacts'}(page=${contactsPage.number-1},size=${contactsPage.size})}">Previous</a>
            <a th:if="${contactsPage.firstPage}" href="javascript:void(0);">Previous</a>
        </li>

        <li th:each="pageNo : ${#numbers.sequence(0, contactsPage.totalPages - 1)}" th:class="${contactsPage.number eq pageNo}? 'active' : ''">
            <a th:if="${contactsPage.number  eq pageNo}" href="javascript:void(0);">
                <span th:text="${pageNo + 1}"></span>
            </a>
            <a th:if="${not (contactsPage.number  eq pageNo)}" th:href="@{${'/contacts'}(page=${pageNo},size=${contactsPage.size})}">
                <span th:text="${pageNo + 1}"></span>
            </a>

        </li>
        <li th:class="${contactsPage.number + 1 ge contactsPage.totalPages} ? 'disabled' : ''">
            <a th:if="${not contactsPage.lastPage}" th:href="@{${'/contacts'}(page=${contactsPage.number+1},size=${contactsPage.size})}">Next</a>
            <a th:if="${contactsPage.lastPage}" href="javascript:void(0);">Next</a>
        </li>
    </ul>
</div>