Skip to content

Instantly share code, notes, and snippets.

@jpomykala
Last active March 3, 2021 11:09
Show Gist options
  • Save jpomykala/e8e6a9cffad786cdd61cb2ab93cfa4bc to your computer and use it in GitHub Desktop.
Save jpomykala/e8e6a9cffad786cdd61cb2ab93cfa4bc to your computer and use it in GitHub Desktop.
Thymeleaf Pagination: page -> Spring Data Page // mapping -> path to list eg '/admin/log/list' // buttonPages -> max pages to show *2
<!-- usage -->
<div th:insert="template :: pagination(${logsList}, ${'/admin/log/list'}, ${100})"></div>
<!-- pagger -->
<div th:fragment="pagination(page, mapping, buttonPages)">
<div class="dataTables_paginate paging_simple_numbers">
<ul class="pagination">
<li class="paginate_button previous"
th:classappend="${page.hasPrevious()} ? '' : 'disabled'">
<a th:if="${page.hasPrevious()}" th:href="@{${mapping}(page=${page.getNumber()-1})}">Previous</a>
<a th:if="${!page.hasPrevious()}">Previous</a>
</li>
<li class="paginate_button"
th:if="${pageNumber > -1 && pageNumber < page.getTotalPages()}"
th:classappend="${pageNumber == page.getNumber()} ? 'active' : ''"
th:each="pageNumber : ${#numbers.sequence(page.getNumber()-buttonPages, page.getNumber()+buttonPages)}">
<a th:href="@{${mapping}(page=${pageNumber})}">[[${pageNumber}+1]]</a>
</li>
<li class="paginate_button next"
th:classappend="${page.hasNext()} ? '' : 'disabled'">
<a th:if="${page.hasNext()}" th:href="@{${mapping}(page=${page.getNumber()+1})}">Next</a>
<a th:if="${!page.hasNext()}">Next</a>
</li>
</ul>
</div>
</div>
<!-- Java method -->
@RequestMapping(value = "/admin/log/list")
public String showLogs(Model model, @RequestParam(required = false, defaultValue = "0") int page) {
Page<Log> logs = logService.pullLogs(new PageRequest(page, 15));
model.addAttribute("logsList", logs);
return "admin/log/list";
}
@khosroMakari1989
Copy link

Hi Jakub, thank you for the simple and dynamic pager.
I also needed to have the first and last button. So, I edited it as below:

<div th:fragment="pagination(page, mapping, buttonPages)">
        <ul class="pagination justify-content-center font-weight-medium">
            <li class="page-item previous"
                th:classappend="${!page.isFirst()} ? '' : 'disabled'">
                <a class="page-link" rel="tooltip" th:if="${!page.isFirst()}" th:href="@{${mapping}(page=${0})}">&#060;&#060;</a>
                <a class="page-link" rel="tooltip" th:if="${page.isFirst()}">&#060;&#060;</a>
            </li>

            <li class="page-item previous"
                th:classappend="${page.hasPrevious()} ? '' : 'disabled'">
                <a class="page-link" rel="tooltip" th:if="${page.hasPrevious()}" th:href="@{${mapping}(page=${page.getNumber()-1})}">&#060;</a>
                <a class="page-link" rel="tooltip" th:if="${!page.hasPrevious()}">&#060;</a>
            </li>

            <li class="page-item"
                th:if="${pageNumber > -1 && pageNumber < page.getTotalPages()}"
                th:classappend="${pageNumber == page.getNumber()} ? 'active' : ''"
                th:each="pageNumber : ${#numbers.sequence(page.getNumber()-buttonPages, page.getNumber()+buttonPages)}">
                <a class="page-link"  rel="tooltip" th:href="@{${mapping}(page=${pageNumber})}">[[${pageNumber}+1]]</a>
            </li>

            <li class="page-item next"
                th:classappend="${page.hasNext()} ? '' : 'disabled'">
                <a class="page-link" rel="tooltip" th:if="${page.hasNext()}" th:href="@{${mapping}(page=${page.getNumber()+1})}">&#062;</a>
                <a class="page-link" rel="tooltip" th:if="${!page.hasNext()}">&#062;</a>
            </li>
            <li class="page-item next"
                th:classappend="${!page.isLast()} ? '' : 'disabled'">
                <a class="page-link" rel="tooltip" th:if="${!page.isLast()}" th:href="@{${mapping}(page=${page.getTotalPages()-1})}">&#062;&#062;</a>
                <a class="page-link" rel="tooltip" th:if="${page.isLast()}">&#062;&#062;</a>
            </li>

        </ul>
</div>

I hope it may help other people :)

@jpomykala
Copy link
Author

Thanks for your contribution! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment