SpringBoot와 Thymeleaf를 이용하여 페이징하기

안녕하세요.

SpringBoot로 만든 게시판 소스에 Thymeleaf를 사용하여 페이징 기능을 추가해보겠습니다.

목록을 가져오는 서비스 메소드 구현

먼저, 목록을 가져오는 서비스 메소드를 구현해보도록 하겠습니다.

Service

/**
 * 방명록을 모두 가져오는 메소드
 * @param startAt 현재 가져온 페이지
 * @return
 */
@Override
public Page<GuestBook> findAllPage(int startAt) {

    Pageable pageable = PageRequest.of(startAt, 10);
    
    return  guestBookRepository.findAll(pageable);
}

startAt은 현재 페이지를 말합니다. 주소창에서 파라미터로 가져온 후 넘겨줍니다.

(좀 이따 컨트롤러에서 나올거에요!)

Pageable로 제약 조건을 지정해준 뒤에, Page 자료형으로 넘겨줍니다.

저 같은 경우에는 10개씩 보고 싶었기 때문에 10으로 지정했습니다.

컨트롤러 구현

Controllor

@GetMapping("/list")
public String welcome(@RequestParam(value = "page", defaultValue = "0") int page, Model mode){

    /*
    source code ...
    */

    // 페이징 처리
    Page<GuestBook> guestBookList = guestBookService.findAllPage(page);

    model.addAttribute("pages", guestBookList );
    model.addAttribute("maxPage", 5);

}

@RequestParam으로 page의 값을 받아 온 후에,

방금 생성한 서비스의 메소드를 호출 해주며 page를 넘겨줍니다.

그 후에 받은 리스트와 한 번에 보여줄 페이지 수를 모델에 추가해줍니다.

타임리프 구현

Thymeleaf

<div class="page-num"
     th:with="start=${(pages.number/maxPage)*maxPage + 1},
                  end=(${(pages.totalPages == 0) ? 1 : (start + (maxPage - 1) < pages.totalPages ? start + (maxPage - 1) : pages.totalPages)})" >
    <ul>
        <li th:if="${start > 1}">
            <a th:href="@{/list?(page=0)}" th:text="'<<'"></a></li>
        </li>

        <li th:if="${start > 1}">
            <a th:href="@{/list?(page=${start - maxPage})}" th:text="'<'"></a>
        </li>


        <li th:each="page: ${#numbers.sequence(start, end)}">
            <a th:href="@{/list?(page=${page-1})}" th:text="${page}"></a></li>
        </li>

        <li th:if="${end < pages.totalPages}">
            <a th:href="@{/list?(page=${start + maxPage})}" th:text="'>'"></a>
        </li>

        <li th:if="${end < pages.totalPages}">
            <a th:href="@{/list?(page=${pages.totalPages-1})}" th:text="'>>'"></a></li>
        </li>
    </ul>

</div>

저 같은 경우에는 경로가 /list이기 때문에 href에 /list를 지정해줬습니다.

만약 다른 경로라면 바꾸어주어야합니다.

결과 화면

성공하면 이렇게 나오게 됩니다!

css를 입히지 않아서 날 것 그대로 나왔지만 (...) 페이징은 잘 됩니다.

자바에서 제공해주는 Page<>를 활용하면 이런식으로 정말 간단하게 구현할 수 있습니다!