Thymeleaf and Pagination

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

Thymeleaf and Pagination

Alex
Hi,

Has anybody done a paginated table with Thymeleaf and Spring MVC?
What could be the best approach for implementation? I am looking at both ajax and non-ajax.

Thanks
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and Pagination

Zemi
Administrator
Hi Alex,

> What could be the best approach for implementation?

I'm telling you ONE implementation, and later we could discuss about the BEST approach.

You can use the Spring's PagedListHolder utility to help pagination in the Controller like that:

        String page = request.getParameter("page");
        PagedListHolder<Product> products;
        if ("previous".equals(page)) {
            products = (PagedListHolder<Product>) request.getSession().getAttribute("pagedProductList");
            products.previousPage();
        } else if ("next".equals(page)) {
            products = (PagedListHolder<Product>) request.getSession().getAttribute("pagedProductList");
            products.nextPage();
        } else {
            products = new PagedListHolder<Product>(productDAO.searchByKeyword(keyword));
            products.setPageSize(10);
            request.getSession().setAttribute("pagedProductList", products);
        }
        model.addAttribute("products", products);

and in the template you can browse results like that:

       <div th:each="product : ${products.pageList}">
             ...
       </div>

and add page navigation like that:

       < a th:if="${!products.firstPage}"
                th:href="@{/search.html(keyword=${param.keyword}, page='previous')}">Previous< /a>
       < span th:text="${products.page + 1}">1 / 10< /span>
       < a th:if="${!products.lastPage}"
                th:href="@{/search.html(keyword=${param.keyword}, page='next')}">Next< /a>

This approach has the following features:
- Non-AJAX.
- The result list is stored in session, what could lead to a high memory usage and prevents to have two browser tabs with different searches.


Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and Pagination

Zemi
Administrator
Now another implementation based on the same PagedListHolder class.

The controller has this code:

        PagedListHolder<Product> products = new PagedListHolder<>(productDAO.searchByKeyword(keyword));
        products.setPageSize(10);
        if (request.getParameter("page") != null) {
            int page = Integer.parseInt(request.getParameter("page"));
            products.setPage(page);
        }
        model.addAttribute("products", products);

And the pagination in the template looks like that:

       < a th:if="${!products.firstPage}"
                th:href="@{/search.html(keyword=${param.keyword}, page=${products.page - 1})}">Previous< /a>
       < span th:text="${products.page + 1}">1 / 10< /span>
       < a th:if="${!products.lastPage}"
                th:href="@{/search.html(keyword=${param.keyword}, page=${products.page + 1})}">Next< /a>

This approach has the following features:
- Non-AJAX.
- The result list is not stored in session, with more CPU-consumption than the former approach.

Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and Pagination

Zemi
Administrator
Some additional notes:
- An AJAX approach should not have a very different implementation.
- The PagedListHolder class is intented to be used with the whole list in memory. If this is a problem for you, you should discard this approach and paginate within your persistence code.
- Maybe a Thymeleaf custom attribute processor could be programmed to encapsule all the pagination magic, as in the JSP tag library displaytag. In this case, it would have to be combined with the th:each processor, like:
    <div th:each="product : ${products}" my:paginate="${products}">
(I am not saying that would be easy)
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and Pagination

Alex
Hi Zemi,

Thanks a lot.
I ended up integrating jqgrid which is an ajax pagination implementation.

alex
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and Pagination

lmpampaletakis
Although I have read about pagination in this thread, I am not aware if an implementation like displaytag is implemented in the version 2.x. All this magic that displaytag offers would give a boost to this template engine. If anyone knows something like that, I would be grateful. We want to switch to Thymeleaf, but we need something like displaytag, because we already use it.

Thanks in advance

L.B
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and Pagination

Thibault Duchateau
Hey,

You may like http://dandelion.github.io/datatables/ :-)

Regards,
Thibault
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and Pagination

lmpampaletakis
It 's a good solution. I' ll have a quick look. This project is quite big, so as you understand i need a solid solution that's why I am asking.

Thanks Thibault!
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and Pagination

Thibault Duchateau
lmpampaletakis wrote
This project is quite big, so as you understand i need a solid solution that's why I am asking.
Even if it's not too far, I regret to inform you that it's not yet officially production-ready.

Regards,
Thibault
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and Pagination

Zemi
Administrator
In reply to this post by lmpampaletakis
You can also take a look at
     http://pagesdialect.sourceforge.net/

In fact, it was inspired by displaytag.

Regards,
  Zemi

Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and Pagination

lmpampaletakis
Zemi wrote
You can also take a look at
     http://pagesdialect.sourceforge.net/

In fact, it was inspired by displaytag.

Regards,
  Zemi
This says:  These utilities work with the full Collection object in memory. This is something I would like to avoid.

Thanks
L.B
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf and Pagination

Shyam
In reply to this post by Zemi
Zemi, I saw you post on PagedListHolder ,It is possible for showing Previous and Next links but not like Previous 1 2 3 4....Next . How to make possible ?