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

问题描述

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

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.

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

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.

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

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.

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

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

我知道也许这个问题更适合于Code Review网站，但是，由于Thymeleaf似乎是一种用户群很少的技术，因此我希望在Stack Overflow上找到一个合理的答案，因为它具有更大的用户群(我相信).

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.

推荐答案

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

但不使用Spring Pageable周围的包装器

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