부트스트랩,타임리프 Pagination 모듈

사용한 부트 스트랩 버전

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

1.  페이지를 모두 식별할 수 있도록 하는 경우

첫 페이지 마지막 페이지에서는 <<, >>가 disable 된다.

<ul th:if="${messages.totalPages > 1}">
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item" th:classappend="${messages.first} ? 'disabled'">
                <a class="page-link" th:href="@{/home(page=0)}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>

            <li class="page-item" th:each="pageNumber : ${#numbers.sequence(0, messages.totalPages - 1)}">
                <a class="page-link" th:if="${pageNumber==messages.number}" th:href="@{/home(page=${pageNumber})}"
                   th:text="${pageNumber + 1}" style="background-color: dodgerblue"></a>
                <a class="page-link" th:unless="${pageNumber==messages.number}"
                   th:href="@{/home(page=${pageNumber})}"
                   th:text="${pageNumber + 1}"></a>
            </li>

            <li class="page-item" th:classappend="${messages.last} ? 'disabled'">
                <a class="page-link" th:href="@{/home(page=${messages.totalPages - 1})}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</ul>

 

 

2. 한 페이지씩 넘겨지는  방법 

<div class="pagination" th:if="${messages != null}">
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="page-item" th:classappend="${messages.first} ? 'disabled'">
            <a class="page-link" th:href="${messages.first} ? null : '/home?page=' + ${messages.number - 1}"
               aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>


        <li class="page-item" th:each="page : ${messages.totalPages}"
            th:classappend="${messages.totalPages - 1 == messages.number} ? 'active'">
            <a class="page-link" th:text="${messages.number}+1"></a>
        </li>


        <li class="page-item" th:classappend="${messages.last} ? 'disabled'">
            <a class="page-link" th:href="${messages.last} ? null : '/home?page=' + ${messages.number + 1}"
               aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
</div>

 

 

스프링부트 코드

컨트롤러 

@GetMapping("/home")
public String home(Authentication authentication, Model model
        , @RequestParam(defaultValue = "0") int page
        , @RequestParam(defaultValue = "10") int limit) {

    Page<ResponseMessageDto> messages = guestBookMessageService.findByPage(page, limit);
    model.addAttribute("messages", messages);
    return "home";
}

서비스

public Page<ResponseMessageDto> findByPage(int page, int limit) {
    return guestBookMessageRepository.findAll(PageRequest.of(page, limit, Sort.by("id").reverse())).map(ResponseMessageDto::fromEntity);
}

 

 

 

 

 

REFERENCES. 

https://getbootstrap.com/docs/4.0/components/pagination/

https://getbootstrap.kr/docs/5.0/components/pagination/