Spring + Thymeleaf - 如何实现列表的分页 [英] Spring + Thymeleaf - how to implement pagination for a list

问题描述

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

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

我想获得以下表格中的页面列表.

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

此外，除了 currPageNo 和 numOfPages 之外，我还必须向视图发送另外两个变量.理想的解决方案不需要我这样做.

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

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

<li th:if="${currPageNo &gt; 1}"><a th:href="@{/items.html(pageNo = ${currPageNo - 1})}" href=""><上一页<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 th:if="${currPageNo &gt;= 5}">...<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 th:if="${currPageNo &lt;= (numOfPages - 4)}">...<li th:class="${currPageNo == numOfPages} ? 'selected'"><a th:href="@{/items.html(pageNo = ${numOfPages})}" th:if="${currPageNo &lt; numOfPages}" th:text="${numOfPages}" href="">10<span th:if="${currPageNo == numOfPages}" th:text="${numOfPages}">1</span><li th:if="${currPageNo &lt; numOfPages}"><a th:href="@{/items.html(pageNo = ${currPageNo + 1})}" href="">下一个&gt;</a>

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

• 必须将 firstPageNo 和 lastPageNo 的预计算值从控制器发送到视图.
• 必须在表达式中使用 < 而不是 <.
• 必须同时使用具有互斥条件的锚点和跨度，以便浏览器不使用当前页面的链接.

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

<小时>

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

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

解决方案

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

但不使用 Spring Pageable 的包装器

<li th:class="${contactsPage.number eq 0} ? 'disabled' : ''"><a th:if="${not contactsPage.firstPage}" th:href="@{${'/contacts'}(page=${contactsPage.number-1},size=${contactsPage.size})}">上一个<a th:if="${contactsPage.firstPage}" href="javascript:void(0);">上一个</a><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 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})}">下一步<a th:if="${contactsPage.lastPage}" href="javascript:void(0);">下一步</a>

I am developing a simple application using Spring + Thymeleaf. On one of the pages I have a list of items which needs to be paginated.

Ideally I would like to only send the currPageNo (the number of the current page) and numOfPages (the total number of pages) variables to the view and the rest of the work would be done in there (this is a presentation issue and has nothing to do with the business logic). If, however, the cleanest solution would require me to do some computation in the controller first, I would accept it as a small evil.

I would like to get the list of pages in the following form.

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

I was only able to come with the following solution. It works but I believe that you will agree that it is very messy and really hard to read.

Moreover, in addition to currPageNo and numOfPages I had to send two more variables to the view. The ideal solution would not require me to do that.

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

The current version of my code follows.

<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>

The following list sumarizes the issues that I would like to get rid of the most. I understand that some of them are inherent to the platform but still, the list seems to be quit long and the code messy.

• Having to send the precomputed values of firstPageNo and lastPageNo to the view from the controller.
• Having to use < instead of < in the expressions.
• Having to use both an anchor and a span with mutually exclusive conditions in order for the browser not to use a link for the current page.

I also welcome any other suggestions about how to improve the quality of the code.

---

I understand that perhaps this question would be a better fit for the Code Review site, but, as Thymeleaf seems to be a technology with a tiny user base yet, I expect a reasonable answer rather here on Stack Overflow, which has a much greater user base (I believe).

If, however, such a question is really not welcome here, please consider moving it to the right site instead of closing it so that I get the advice I need.

解决方案

Similar to solution described in http://www.javacodegeeks.com/2013/03/implement-bootstrap-pagination-with-spring-data-and-thymeleaf.html

but without using wrapper around 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>

这篇关于Spring + Thymeleaf - 如何实现列表的分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！