페이징 처리 버튼
앞에서 url 에 페이지 값을 통해 각 페이지의 question 을 보여주는 기능을 만들었습니다.
하지만, 항상 url 을 통해 페이지를 보여줄 수 없기 때문에
페이지를 보여줄 수 있는 게시물 리스트 아래 페이지 버튼을 만들겠습니다.
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
<table class="table">
...
</table>
<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+1}" 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>question_list 파일에서 page 를 선택할 수 있도록 ul 태그를 통해 만들었습니다.
첫번째 li 태그는 이전의 페이지가 없을 경우 disabled 를 통해 보여지지 않고
이전 페이지가 있을 경우 "이전" 이라는 버튼을 만듭니다.
<li class="page-item" th:classappend="${!paging.hasPrevious} ? 'disabled'">
<a class="page-link" th:href="@{|?page=${paging.number-1}|}">
<span>이전</span>
</a>
</li>두번째 li 태그는 0부터 마지막 페이지까지 버튼을 만들어줍니다.
각 버튼마다 localhost:8080/question/list?page=(페이지버튼) 을 연결해줍니다.
또한 현재 페이지를 기준으로 좌우로 각각 최대 5개의 페이지 버튼을 만듭니다.
<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+1}" class="page-link" th:href="@{|?page=${page}|}"></a>
</li>마지막 li 태그는 첫번째 태그와 동일하게
다음 페이지가 없을 경우 disabled 를 통해 보여지지 않습니다.
<li class="page-item" th:classappend="${!paging.hasNext} ? 'disabled'">
<a class="page-link" th:href="@{|?page=${paging.number+1}|}">
<span>다음</span>
</a>
</li>브라우저를 통해 확인해보면 다음과 같이 화면이 나오는것을 볼 수 있습니다.
번호순으로 출력
다음으로 question 데이터를 id 값이 높은것이 앞 페이지에 출력이 되도록
QuestionService 의 getList 메서드를 수정하겠습니다.
package com.crud.service;
import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.List;
import java.util.Optional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;
import com.crud.model.Question;
import com.crud.repository.QuestionRepository;
@Service
public class QuestionService {
...
public Page<Question> getList(int page) {
List<Sort.Order> sorts = new ArrayList<>();
sorts.add(Sort.Order.desc("id"));
Pageable pageable = PageRequest.of(page, 10, Sort.by(sorts));
return questionRepository.findAll(pageable);
}
}위와 같이 PageRequest.of 메서드의 세번째 인자로 Sort 객체를 전달해줍니다.
Sort 객체는 id 값을 내림차순으로 정렬시켜 만든 객체입니다.
브라우저를 통해 접속하면 아래와 같이 출력이 됩니다.
'Spring > Springboot 실습' 카테고리의 다른 글
| 게시판 만들기 - 회원가입(2) (0) | 2023.01.24 |
|---|---|
| 게시판 만들기 - 회원가입(1) (0) | 2023.01.24 |
| 게시판 만들기 - 페이징 처리(1) (0) | 2023.01.22 |
| 게시판 만들기 - 네비게이션바 (0) | 2023.01.22 |
| 게시판 만들기 - 답변 등록 기능 (0) | 2023.01.18 |
