페이징 구현하기

 

JPA 환경 구축시 설치했던 JPA 관련 라이브러리에 이미 페이징을 위한 패키지가 있다.

 

• org.springframework.data.domain.Page
• org.springframework.data.domain.PageRequest
• org.springframework.data.domain.Pageable

1) 리포지터리에 findAll 메서드를 추가한다.

 

public interface QuestionRepository extends JpaRepository<Question, Integer> {
    Page<Question> findAll(Pageable pageable);
}

이 때 임포트가 domain.Page이어야 한다.

import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;

 

2) 서비스에 Page<Question> 메서드를 변경

(정수 타입의 페이지 번호를 입력받아 해당 페이지의 질문 목록을 리턴하는 메서드.)

import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
    
    public class QuestionService {
    
    public Page<Question> getList(int page) {
        Pageable pageable = PageRequest.of(page, 10);
        return this.questionRepository.findAll(pageable);
    }
    }

 

3) 컨트롤러도 변경한다.

 

import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.data.domain.Page;

public class QuestionController {

    @RequestMapping("/list")
    public String list(Model model, @RequestParam(value="page", defaultValue="0") int page) {
        Page<Question> paging = this.questionService.getList(page);
        model.addAttribute("paging", paging);
        return "question_list";
    }

 URL에 페이지 파라미터 page가 전달되지 않은 경우 디폴트 값으로 0이 되도록 설정

 

Page 객체 속성

paging.isEmpty	페이지 존재 여부 (게시물이 있으면 false, 없으면 true)
paging.totalElements	전체 게시물 개수
paging.totalPages	전체 페이지 개수
paging.size	페이지당 보여줄 게시물 개수
paging.number	현재 페이지 번호
paging.hasPrevious	이전 페이지 존재 여부
paging.hasNext	다음 페이지 존재 여부

 

4) 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:if="${page >= paging.number-5 and page <= paging.number+5}"
                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>
    <!-- 페이징처리 끝 -->
    <a th:href="@{/question/create}" class="btn btn-primary">질문 등록하기</a>
</div>
</html>

타임리프의 th:classappend="조건식 ? 클래스값" 속성은 조건식이 참인 경우 클래스값을 class 속성에 추가한다.

 

이전 페이지가 없으면 비활성화	th:classappend="${!paging.hasPrevious} ? 'disabled'"
다음 페이지가 없으면 비활성화	th:classappend="${!paging.hasNext} ? 'disabled'"
이전 페이지 링크	th:href="@{|?page=${paging.number-1}|}"
다음 페이지 링크	th:href="@{|?page=${paging.number+1}|}"
페이지 리스트 루프	th:each="page: ${#numbers.sequence(0, paging.totalPages-1)}"
현재 페이지와 같으면 active 적용	th:classappend="${page == paging.number} ? 'active'"

출처:https://wikidocs.net/162028