게시판 목록조회에 페이징을 적용해보자.
Repository
Spring Data JPA 에서는 Pageable 기능을 지원해주기 때문에 아주 손쉽게 페이징을 할 수 있다.
findAll 메서드를 사용하고 우리는 Pageable만 만들어서 넘겨주면 되는것이다.
한번 구현해보자.
먼저 Repository에 메서드를 생성 해준다.
public interface BoardRepository extends JpaRepository<Board, Long> {
Page<Board> findAll(Pageable pageable);
}Service
public Page<BoardDTO.Response> findAll(Pageable pageable) {
int page = pageable.getPageNumber() - 1; // Pageable은 내부적으로 0부터 시작하기때문에 싱크가 안맞는이슈가 있음.
int pageLimit = 12; // 한 페이지에 보여주는 게시글 수
Page<Board> boardList = boardRepository.findAll(PageRequest.of(page, pageLimit, Sort.by(Sort.Direction.DESC, "id")));
return boardList.map(BoardDTO.Response::new);
}Controller
@GetMapping({"board", "", "/", "list"})
public String board(Model model, @PageableDefault(page = 1) Pageable pageable) {
Page<BoardDTO.Response> boardList = boardService.findAll(pageable);
int blockLimit = 3;
int startPage = ((int) Math.ceil((double) pageable.getPageNumber() / blockLimit) - 1) * blockLimit + 1;
int endPage = Math.min((startPage + blockLimit - 1), boardList.getTotalPages());
model.addAttribute("dtoList", boardList);
model.addAttribute("startPage", startPage);
model.addAttribute("endPage", endPage);
return "board";
}blockLimit은 보여줄 페이지의 개수
ex) 현재 2페이지면 2,3,4 이런식으로 보여준다.
Board.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<title>개발 블로그</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-4">
<h2>Board</h2>
<table class="table">
<thead>
<tr>
<th>게시판 번호</th>
<th>제목</th>
<th>작성자</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr th:each="dto : ${dtoList}">
<td>
<a th:href="@{/read/{id}(id=${dto.id})}"><span th:text="${dto.id}"></span></a>
</td>
<td th:text="${dto.title}"></td>
<td th:text="${dto.writer}"></td>
<td th:text="${dto.views}"></td>
</tr>
</tbody>
</table>
<a th:href="@{/register}" class="btn btn-primary mb-3">글쓰기</a>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li th:class="${dtoList.first} ? 'page-item disabled' : 'page-item'">
<a class="page-link" th:href="@{/list/(page=1)}">처음</a>
</li>
<li th:class="${dtoList.first} ? 'page-item disabled' : 'page-item'">
<a class="page-link" th:href="${dtoList.first} ? '#' : @{/list/(page=${dtoList.number})}">이전</a>
</li>
<li th:each="page: ${#numbers.sequence(startPage, endPage)}"
th:class="${page == dtoList.number + 1} ? 'page-item active' : 'page-item'">
<a class="page-link" th:href="@{/list/(page=${page})}" th:text="${page}"></a>
</li>
<li th:class="${dtoList.last} ? 'page-item disabled' : 'page-item'">
<a class="page-link" th:href="${dtoList.last} ? '#' : @{/list/(page=${dtoList.number + 2})}">
다음
</a>
</li>
<li th:class="${dtoList.last} ? 'page-item disabled' : 'page-item'">
<a class="page-link" th:href="@{/list/(page=${dtoList.totalPages})}">마지막</a>
</li>
</ul>
</nav>
</div>
</body>
</html>부트스트랩을 사용해서 보다 깔끔하게 해줄 수 있다.
'portfolio > 게시판 만들기' 카테고리의 다른 글
| 게시판 crud 작업 (0) | 2023.07.10 |
|---|---|
| Jasypt를 사용하여 properties(yml) 주요 정보 암호화 (0) | 2023.07.09 |
| 프로젝트 설계 (0) | 2023.07.09 |
