{"id":1993,"date":"2021-12-17T12:00:00","date_gmt":"2021-12-17T11:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/part-2-how-to-implement-pagination-in-spring-boot-with-thymeleaf\/"},"modified":"2026-07-06T18:42:11","modified_gmt":"2026-07-06T16:42:11","slug":"part-2-how-to-implement-pagination-in-spring-boot-with-thymeleaf","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/part-2-how-to-implement-pagination-in-spring-boot-with-thymeleaf\/","title":{"rendered":"Part 2 \u2013 How to Implement Pagination in Spring Boot with Thymeleaf"},"content":{"rendered":"

We would not complete this series on How to Implement Pagination in Spring Boot. You can find Part 1 here<\/a>.<\/p>\n

In this part we would add the Page Number links to the table footer. We would also add the links for the First, Previous, Next and Last pages.<\/p>\n

 <\/p>\n

1. The Pagination Layout<\/strong><\/h4>\n

We would use the pagination layout available in Bootstrap. This is shown below:<\/p>\n

<nav<\/span> aria-label=<\/span>\"Page navigation example\"<\/span>><\/span>\r\n    Total Items [[${totalItems}]] : Page [[${currentPage}]] of [[${totalPages}]]\r\n    \r\n    <ul<\/span> class=<\/span>\"pagination\"<\/span>><\/span>\r\n        <li<\/span> class=<\/span>\"page-item\"<\/span>><\/span>\r\n            First\r\n        <\/li><\/span>\r\n\r\n        <li<\/span> class=<\/span>\"page-item\"<\/span>><\/span>\r\n            Previous\r\n        <\/li><\/span>\r\n\r\n        <li<\/span> class=<\/span>\"page-item\"<\/span>><\/span>\r\n             1 2 3 4 ...\r\n        <\/li><\/span>\r\n\r\n        <li<\/span> class=<\/span>\"page-item\"<\/span>><\/span>\r\n            Next\r\n        <\/li><\/span>\r\n\r\n        <li<\/span> class=<\/span>\"page-item\"<\/span>><\/span>\r\n            Last\r\n        <\/li><\/span>\r\n    <\/ul><\/span>\r\n<\/nav><\/span>\r\n<\/pre>\n
 <\/p>\n
2. First Page<\/strong><\/h4>\n
This would be a link if\u00a0 the current page is greater than 1. In other words, it would be a plain text unless the current page is greater than 1. It makes a request for page number of 1. The code is given below:<\/p>\n
<a<\/span>  class=<\/span>\"page-link\"<\/span> th:if=<\/span>\"${currentPage > 1}\"<\/span> th:href=<\/span>\"@{\/parameters\/countries\/page\/1}\"<\/span>><\/span>First<\/a><\/span>\r\n<span<\/span> th:unless=<\/span>\"${currentPage > 1}\"<\/span>><\/span>First<\/span><\/span>\r\n<\/pre>\n
 <\/p>\n
3. Previous Page<\/strong><\/h4>\n
Just like the first page, the text would be a link if the current page is greater than 1. However, it makes a request for page number of currentPage – 1. See the code below:<\/p>\n
<a<\/span> th:if=<\/span>\"${currentPage > 1}\"<\/span> th:href=<\/span>\"@{'\/parameters\/countries\/page\/' + ${currentPage - 1}}\"<\/span>><\/span>Previous<\/a><\/span>\r\n<span<\/span> th:unless=<\/span>\"${currentPage > 1}\"<\/span>><\/span>Previous<\/span><\/span>\r\n<\/pre>\n
 <\/p>\n
4. Page Number Links<\/strong><\/h4>\n
The page number links would exactly as we have it before but now inside the <li><\/li> tags.<\/p>\n
<span<\/span> th:each=<\/span>\"i: ${#numbers.sequence(1, totalPages)}\"<\/span>><\/span>\r\n        <a<\/span> th:if=<\/span>\"${i != currentPage}\"<\/span> th:href=<\/span>\"@{'\/parameters\/countries\/page\/' + ${i}}\"<\/span>><\/span>[[${i}]]<\/a><\/span>\r\n        <span<\/span> th:unless=<\/span>\"${i != currentPage}\"<\/span>><\/span>[[${i}]]<\/span><\/span>\r\n<\/span><\/span>\r\n<\/pre>\n
 <\/p>\n
5. Next Page<\/strong><\/h4>\n
In case of the next page, the Next displays a link if the current page is less than the total pages. Otherwise, it displays a plain text. It request for currentPage + 1<\/p>\n
<a<\/span> th:if=<\/span>\"${currentPage < totalPages}\"<\/span> th:href=<\/span>\"@{'\/parameters\/countries\/page\/' + ${currentPage + 1}}\"<\/span>><\/span>Next<\/a><\/span>\r\n<span<\/span> th:unless=<\/span>\"${currentPage < totalPages}\"<\/span>><\/span>Next<\/span><\/span>\r\n<\/pre>\n
 <\/p>\n
6. Last Page<\/strong><\/h4>\n
In this case, a link would be displayed if the current page is less than the total pages. Otherwise, it displays a plain text. It simply request for the page number of totalPages.<\/p>\n
<a<\/span> th:if=<\/span>\"${currentPage < totalPages}\"<\/span> th:href=<\/span>\"@{'\/parameters\/countries\/page\/' + ${totalPages}}\"<\/span>><\/span>Last<\/a><\/span>\r\n<span<\/span> th:unless=<\/span>\"${currentPage < totalPages}\"<\/span>><\/span>Last<\/span><\/span>\r\n<\/pre>\n
 <\/p>\n
7. Combining Paging and Sorting<\/strong><\/h4>\n
Now, if you we have the pagination working as expected. But if you try to do sorting by clicking on the column headers, it doesn’t work. We’ll fix this by combining pagination and sorting.<\/p>\n
First, note the following points:<\/p>\n