【问题标题】:How can I elegantly preserve filter parameters when paginating with Thymeleaf?使用 Thymeleaf 分页时如何优雅地保留过滤器参数?
【发布时间】:2015-10-27 10:54:26
【问题描述】:

在我的许多页面上,我有几个选项可以对一长串结果进行排序或过滤。

当有人翻阅数据时,我希望正确保留这些选择。例如:

  1. 开始查看所有工单的列表。 (/tickets)
  2. 搜索所有票,例如“foo”。 (/tickets?query=foo)
  3. 转到下一页。 (/tickets?query=foo&page=2)
  4. 请参阅“foo”之类的工单的下一页,而不是“所有工单”的第二页。 (例如不是/tickets?page=2

在 JSP 中,我想出了这样的解决方案:

<c:if test="${page.hasNext()}">
    <spring:url value="" var="nextLink">
        <c:forEach items="${param}" var="curParam">
            <c:if test="${curParam.key != 'page'}">
                <spring:param name="${curParam.key}" value="${curParam.value}"/>
            </c:if>
        </c:forEach>
        <spring:param name="page" value="${page.nextPageable().pageNumber}"/>
    </spring:url>
    <li>
        <a href="${nextLink}" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
</c:if>

这基本上构造了一个指向与当前页面相同的路径的新 URL,但在其查询参数中添加/替换了“路径”参数。

它在 JSP 中相当难看,但我看不到在 Thymeleaf 中真正做到这一点的方法?

或者,也许有一些更好的方法可以使用一些我还没有遇到过的 Spring 或 Thymeleaf 功能?

我希望有一个简洁的 Thymeleaf 片段,我可以在需要分页的任何地方重复使用。到目前为止,这就是我所拥有的,但它最终会丢失“查询”参数等。(我不想在这里硬编码查询参数,因为这会限制这个分页代码的可重用性)

<li th:if="${page.hasNext()}">
    <a href="pagination.html" th:href="@{''(page=${page.nextPageable().pageNumber})}" aria-label="next">
        <span aria-hidden="true">&raquo;</span>
    </a>
</li>

【问题讨论】:

  • 您是否查看过已经存在的项目,例如dandelion.github.io/components/datatables
  • 我遇到了它所基于的 jQuery 插件,但不是这个很好的包装器......我一定会看看,但这看起来像是另一层新东西添加到组合中......(至少一对新的 Thymeleaf 方言)
  • 另外,请给出一个答案,这样我可以接受它,如果它适合我​​的话,给你一些代表:)

标签: spring-mvc pagination thymeleaf


【解决方案1】:

也许这对使用 HTML 和 Spring 和 Thymeleaf 的人有用。

就我而言,我将百里香叶与弹簧一起使用。我有一个 DTO 作为过滤器,用于在控制器中进行过滤。

public class Controller {
        private final int BUTTONS_TO_SHOW = 5;

        public String home(FilterDTO filterDTO @PageableDefault(size = 50) Pageable pageable, Model model){
          List<YourEntity> rows = YourEntityService.findAll();
          Pager pager = new Pager(rows.getTotalPages(), rows.getNumber(), BUTTONS_TO_SHOW);

          model.addAttribute("rows", rows);
          model.addAttribute("pager", pager);
          model.addAttribute("filterDTO", filterDTO);

          return "your-template";
        }
}

和这样的分页器:

<nav style="display: inline-block">
    <ul class="pagination">
      <li th:class="page-item" th:classappend="${rows.number == 0} ? ''">
        <a class="page-link" th:href="@{${#httpServletRequest.requestURI+'?'+filterDTO.toQueryString()}(page=0)}">&laquo;</a>
      </li>
      <li th:class="page-item" th:classappend="${rows.number == 0} ? ''">
        <a class="page-link" th:href="@{${#httpServletRequest.requestURI+'?'+filterDTO.toQueryString()}(page=${rows.number - 1})}">&larr;</a>
      </li>
      <li th:class="page-item" th:classappend="${rows.number == (page - 1)} ? 'active pointer-disabled'"
          th:each="page : ${#numbers.sequence(pager.startPage, pager.endPage)}">
        <a class="page-link" th:href="@{${#httpServletRequest.requestURI+'?'+filterDTO.toQueryString()}(page=${page - 1})}" th:if="${page != 0}"
           th:text="${page}"></a>
      </li>
      <li th:class="page-item" th:classappend="${rows.number + 1 == rows.totalPages or pager.endPage == 0} ? ''">
        <a class="page-link"
           th:href="@{${#httpServletRequest.requestURI+'?'+filterDTO.toQueryString()}(page=${rows.number + 1})}">&rarr;</a>
      </li>
      <li th:class="page-item" th:classappend="${rows.number + 1 == rows.totalPages or pager.endPage == 0} ? ''">
        <a class="page-link"
           th:href="@{${#httpServletRequest.requestURI+'?'+filterDTO.toQueryString()}(page=${rows.totalPages - 1})}">&raquo;</a>
      </li>
    </ul>
  </nav>

在 FilterDTO 类中,我实现了方法:toQueryString(),它返回带有您应用的过滤器的查询字符串。

【讨论】:

    【解决方案2】:

    Dandelion Datatables 是一个可以帮助您避免重新发明轮子的项目。 http://dandelion.github.io/components/datatables/

    【讨论】:

    • 谢谢,这似乎是未来最好的解决方案,而且 Datatables 还添加了许多我想要的其他有用功能 :)
    • 我还没有完全集成 server-side processing,但目前我似乎能够摆脱将所有内容作为基本 AJAX source 转储到单个 JSON 对象中。
    • 我会更新说,在 2019 年,我不再使用或将支持蒲公英。它似乎被有效地放弃了,近 4 年没有发布或提交。但是,我仍然大量使用数据表。
    猜你喜欢
    • 2016-12-09
    • 1970-01-01
    • 1970-01-01
    • 2013-09-23
    • 2015-09-26
    • 2018-01-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多