[Spring] Thymeleaf - Paging

Paging

페이징을 구현하기 위해 추가로 설치해야 하는 라이브러리는 없다. JPA 환경 구축 시 설치했던 JPA 관련 라이브러리에 이미 페이징을 위한 패키지들이 들어 있기 때문이다. 그러므로 다음 클래스들을 이용하면 페이징을 쉽게 구현할 수 있다.

• org.springframework.data.domain.Page: 페이징을 위한 클래스
• org.springframework.data.domain.PageRequest: 현재 페이지와 한 페이지에 보여 줄 게시물 개수 등을 설정하여 페이징 요청을 하는 클래스
• org.springframework.data.domain.Pageable: 페이징을 처리하는 인터페이스

 

오름차순 정렬

<tr th:each="question, iterStat : ${paging}">

<!-- 전체 게시글 번호를 계산: (현재 페이지 번호 * 페이지당 글 개수) + (현재 글의 index) -->
<th th:text="${paging.number * paging.size + iterStat.index + 1}"></th>

</tr>

 

내림차순 정렬

<tr th:each = "question, iterStat : ${paging}">
 
<!-- 전체 게시글 번호를 계산 (내림차순) : (전체 게시글 수 - 현재 페이지 번호 * 페이지당 글 개수) - (현재 글의 index) -->
<th th:text="${(paging.totalElements - (paging.number * paging.size) - iterStat.index)}"></th>

</tr>

 

페이징 처리 예제 (부트스트랩 사용)

<nav th:if="${!paging.isEmpty()}">
	<ul class="pagination justify-content-center">
		<li class="page-item"><a class="page-link" th:classappend="${!paging.hasPrevious}?'disabled'" th:href="@{|?page=${paging.number - 1}|}">Previous</a></li>

		<li class="page-item" th:each="page : ${#numbers.sequence(0, paging.totalPages - 1)}" th:if="${page >= paging.number / 10 * 10 and page < (paging.number / 10 + 1) * 10}"><a class="page-link" th:href="@{|?page=${page}|}" th:text="${page + 1}" th:classappend="${page == paging.number}?'active'"></a></li>

		<li class="page-item"><a class="page-link" th:classappend="${!paging.hasNext}?'disabled'" th:href="@{|?page=${paging.number+1}|}">Next</a></li>
	</ul>
</nav>

 

출력 결과

 

Previous를 누르면 이전 페이지가 출력되고, Next를 누르면 다음 페이지가 출력된다.

이전 페이지 혹은 다음 페이지가 없다면 사용 불가능한 상태가 된다. (disabled)

페이지 번호가 10개 단위로 그룹화되어 보여지고, 사용자가 페이지를 넘기면 그 다음 10개의 번호를 볼 수 있게 되는 방식으로 출력된다.