[Spring Boot] 21. 페이징 기능 (2)페이지 이동 기능 추가

데이터 페이징 처리하는 기능은 아래 글 참고

[Spring Boot] 20. 페이징 기능 추가하기 (1)데이터 페이징 처리

 

페이징 이동 기능 추가하기

질문 목록에서 url이 아닌 이전, 다음과 같은 링크를 추가해보자

/templates/question_list.html

...
<!-- 페이징 처리 시작 -->
<div th:if="${!paging.isEmpty()}">
	<ul class="pagination justify-content-center">
		<li class="page-item" th:classappend="${!paging.hasPrevious} ? 'disabled'">
			<a class="page-link" th:href="@{|?page=${paging.number-1}|}">
				<span>이전</span>
			</a>
		</li>
		<li th:each="page: ${#numbers.sequence(0, paging.totalPages-1)}"
		th:classappend="${page == paging.number}? 'active'" class="page-item">
			<a th:text="${page}" class="page-link" th:href="@{|?page=${page}|}"></a>
		</li>
		<li class="page-item" th:classappend="${!paging.hasNext} ? 'disabled'">
			<a class="page-link" th:href="@{|?page=${paging.number+1}|}">
				<span>다음</span>
			</a>
		</li>
	</ul>
</div>
<!-- 페이징 처리 끝 -->
...

페이지 리스트를 보기 좋게 표시하기 위해 부트스트랩의 pagination 컴포넌트를 이용했다.
pagination, page-item, page-link 등이 pagination 컴포넌트의 클래스로,
pagination은 ul 요소 안에 있는 내용을 꾸밀 수 있고,
page-item은 각 페이지 번호, 이전, 다음 버튼을 나타내고, 
page-link는 이전, 다음버튼에 링클를 나타낸다.

page가 11인 url을 조회해보면 페이지 이동 기능이 구현됐지만 페이지가 모두 표시되는 문제가 발생한다.

 

페이징 이동 기능 완성하기

앞의 문제를 해결하기 위해 템플릿을 수정하자.

/templates/question_list.html

...
th:if="${page >= paging.number-5 and page <= paging.number+5}"
...

페이지 숫자 li 태그에 추가한다. 현재 페이지에서 좌우 5개씩 나타내도록 한다.

결과.

 

최신순으로 데이터 조회하기

그런데 보통 1페이지에 최신순으로 데이터가 표시된다. 이를 위해 서비스를 수정해보자.

/question/QuestionService.java

public Page<Question> getList(int page){
		List<Sort.Order> sorts = new ArrayList<>();
		sorts.add(Sort.Order.desc("createDate"));
		Pageable pageable = PageRequest.of(page, 10, Sort.by(sorts));
		return this.questionRepostiory.findAll(pageable);
}

QuestionService의 getList 메서드를 위처럼 수정하자.

작성일시를 기준으로 역순으로 조회하도록 했다.

 

첫 번째 페이지를 조회하면 가장 최근에 등록된 순서대로 나타나는 것을 볼 수 있다.