Thymeleaf로 Pageable 적용하기!

🌏 WEB/Thymeleaf

Thymeleaf로 Pageable 적용하기!

애정쓰 2021. 2. 5. 14:03

Jpa pageable을 잘모르시는 분은 아래의 링크를 참고해주세요~!

2021/02/03 - [WEB/JPA] - JAP Pageable 사용하기

JAP Pageable 사용하기

Page까지 왔다는건... 기본적인 CRUD를 알고 계신 상태로 이해하고 작성하겠습니다! 할일 : 간단한 리스트 데이터에 Page, Sort 구현하여 API를 구현한다. Service Entity자체를 반환하는건 절때로 하지 않

aejeong.com

설정 세팅 부터 해볼게요 ~!

1. build.gradle

    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

2. application.yml

spring:
  thymeleaf:
    prefix: classpath:templates/
    suffix: .html
    mode: HTML5
    cache: false
    encoding: UTF-8

세팅 완료! 프로젝트 구조는 아래와 같습니다.

3. BoardListController.java

@RequiredArgsConstructor
@Controller
public class BoardListController {

  private final BoardListService boardListService;

  @GetMapping("/board/list")
  public String findAllBoard(Model model, Pageable pageable) {

     Page<QuestionListResponse> boardListResponsePage =  boardListService.findByBoard(pageable);
     model.addAttribute("pages",boardListResponsePage);
     model.addAttribute("maxPage",5);

     return "boardList";
  }

}

4. BoardListService.java

@RequiredArgsConstructor
@Service
public class BoardListService {

  private final BoardRepository boardRepository;

  public Page<BoardListResponse> findByBoard(Pageable pageable) {

    Page<BoardEntity> boardListResponsePage = boardRepository.findAll(pageable);

    return boardListResponsePage.map(
        post ->
            new BoardListResponse(
                post.getTitle(),
                post.getContents(),
                post.getCreatedDate(),
                post.getModifiedDate()));
  }

5. BoardListResponse.java

@Builder
@Getter
@AllArgsConstructor
public class BoardListResponse {
    private String title;
    private String contents;
    private LocalDateTime createdDate;
    private LocalDateTime modifiedDate;
}

6. boardList.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Board Page</title>
</head>
<body>
<h1>Board Page</h1>
<table border="1">
    <tr>
        <th>등록날짜</th>
        <th>제목</th>
        <th>내용</th>

    <tr th:each="post : ${pages}">
        <td th:text="${post.createdDate}">등록 날짜</td>
        <td th:text="${post.title}">제목</td>
        <td th:text="${post.contents}">내용</td>

    </tr>
    </tr>

</table>

<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="@{/board/list?(page=0)}" th:text="'<<'"></a></li>
        </li>

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


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

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

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

</div>

</body>
</html>

저작자표시