Search code examples
javahtmlpaginationthymeleaf

Restrict number of table pages in Thymeleaf + Java


I followed this tutorial:

https://www.youtube.com/watch?v=Aie8n12EFQc

Pagination works. How can I restrict the number of page links below the table? If there is to much records, it can be to much numbers. Numbers are below closing /table tag, it's not inside the table, but below (like in tutorial).

I know there are some solutions in Stackoverflow but they are mostly in php code. Can it be done somehow with java server-side or with Thymeleaf? Or can you send me an already good answered question on this topic.

My thymeleaf:

                     <div th:if = "${totalPages > 1}">
                    <nav aria-label="Page navigation" class="paging">
                             <ul class="pagination">
                                 <li class="page-item">
                                    <a class="page-link"  th:href="@{/customer_list?pageNo=1}">First</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link"  th:href="@{/customer_list?pageNo={currentPage}(currentPage=${currentPage-1})}">Previous</a>
                                </li>
                                <li th:each="i: ${#numbers.sequence(1, totalPages)}" th:classappend="${i==currentPage} ? 'page-item active' : 'page-item'">
                                        <a class="page-link"  th:href="@{/customer_list?pageNo={i}(i=${i})}">[[${i}]]</a>

                                </li>
                                <li class="page-item">
                                    <a class="page-link"  th:href="@{/customer_list?pageNo={currentPage}(currentPage=${currentPage+1})}">Next</a>
                                </li>
                                 <li class="page-item">
                                    <a class="page-link" th:href="@{/customer_list?pageNo={totalPages}(totalPages=${totalPages})}">Last</a>
                                 </li>
                            </ul>
                    </nav>  
            </div>

Controller method in Java: (pageSize only 2, for experimenting)

@GetMapping("/customer_list")
    public String customerList(@RequestParam(name = "pageNo", required = false) Integer pageNo ,Model model) 
    {
            
            if(pageNo == null)
                pageNo = 1;
            
            int pageSize = 2;
            
            try
            {
                Page<CustomerDTO> pageOfCustomers = customerService.findPaginated(pageNo, pageSize);
                List<CustomerDTO> listOfCustomers = pageOfCustomers.getContent();
                
                model.addAttribute("listOfCustomers", listOfCustomers);
                model.addAttribute("currentPage", pageNo);
                model.addAttribute("totalPages", pageOfCustomers.getTotalPages());
                model.addAttribute("totalItems", pageOfCustomers.getTotalElements());
                
            } catch (Exception e)
            {
                log.error("Error in retrieving  the list of customers!", e);
                e.printStackTrace();
            }
            
            return "customer_list";
    }

Solution

  • Have a look to this post : pagination It should answer your question. In a nutshell you add to your template an array with the length equals to the number of pages. Then with some tests you display either dots or the link to the page. It will give something like : << < ... 3456789 ... > >>