Pagination - page number 만들기

AeZan·2021년 9월 28일
0

이거 만들거임


📌 한 페이지에 필요한 만큼만 보이도록 하기

@Repository

@Repository
public interface HistoryRepository extends JpaRepository<History, Integer> {

}

JpaRepository 의 부모 인터페이스인 PagingAndSortingRepository 에서 페이징 기능을 사용하기 위해 다음과 같이 상속 받도록 해줌

@Service

@Service
@RequiredArgsConstructor
public class HistoryService {

  @NonNull
  private final HistoryRepository historyRepository;

  public Page<History> findHistoryList(Pageable pageable) {
    return historyRepository.findAll(pageable);
  }

인터페이스를 사용하기 위해 Service 클래스를 선언해주고 Page를 return 값으로 하는 리스트를 불러오는 메소드를 작성해줌

정확히는 전체 리스트를 select 해주는 기능을 가진 메소드를 호출해줌

그리고 page에 대한 정보를 가질 pageable을 인자로 주면 됨

@Controller

  public String list(Model model,
      @PageableDefault(sort = "date", direction = Direction.DESC, size = 10) Pageable pageable) {
    Page<History> historyList = historyService.findHistoryList(pageable);

@PageableDefault 를 사용하여 소트와 페이징을 지정해줄 수 있음
date를 기준으로 내림차순으로 정렬하고, 한 페이지에 10개의 항목을 보여주기 위해 위와 같이 작성함

마지막으로 Service 클래스에서 작성해준 메소드를 호출해줌


📌 pagable 이용하여 view에 page number 나타내기

pageable이 가지고 있는 속성

last : 마지막 페이지인지
totalElements : DB의 전체 데이터 개수
totlaPages : 만들수 있는 page수
size : 페이지당 나타낼수 있는 데이터 개수
number : 현재 페이지 번호
sort : 정렬 정보
first : 첫번째 페이지 인지
numberOfElements : 실제 데이터 개수
empty : 리스트가 비어있는지 여부


참고 사이트 https://tmdrl5779.tistory.com/61


🧷 텍스트 페이지의 시작과 끝을 나타내는 변수 설정하기

th:with="start=${T(Math).floor(historyList.number/10)}*10+1,
                    end=(${historyList.totalPages} == 0) ? 1 : ((${historyList.totalPages} > ${start}+9) ? ${start}+9 : ${historyList.totalPages})"

(${historyList.totalPages} == 0) ? 1 : 이 구절을 처음엔 뺐었는데 이렇게 되면 리스트 항목이 0일 때 start = 1, end = 0 이 되면서 view 상에서 1, 0 페이지 넘버가 보이게 되었음. 아무것도 없는 리스트여서 1 만 있어야 함에도 불구하고. 따라서 0일 경우를 생각해서 위와 같은 코드를 넣어줌


🧷 페이지 넘버 반복문을 사용하여 나타내기

<li th:each="pageNum : ${#numbers.sequence(start, end)}"
                      th:class="(${pageNum} == (${historyList.number}+1)) ? 'pagination_button page-item active' : 'pagination_button page-item'">
                    <a th:href="@{/history/list(page=${pageNum})}" th:text="${pageNum}"
                       class="page-link"><span class="sr-only"></span></a>
                  </li>

th:each를 사용하여 start부터 end까지 반복하는 for-each 문을 작성해줌
size가 5이면 start, end 계산에 의해 1~5, 5~10 ... 이므로 5번씩 반복하게 됨. 그래서 페이지 넘버가 size만큼 1, 2, 3, 4, 5 가 보이게 되는 것
추가로, 현재 보고 있는 페이지이면 button 색깔이 활성화될 수 있도록 했음

pageNum에 1을 더해준 이유는 page number가 0부터 시작하기 때문.

<!-- page 이전으로 -->
<a th:href="@{/history/list(page=${historyList.number})}" class="page-link">Previous</a>

<!-- page 이후로 -->                  
<a th:href="@{/history/list(page=${historyList.number}+2)}"
                       aria-controls="datatable" class="page-link">Next</a>

페이지 이전 버튼, 이후 버튼은 각각 이전은 그대로, 이후는 +2를 pageNum에 해주면 됨
이 또한 page number가 0부터 시작하기 때문임


😙 끝



💬 queryDSL 과 pagable 함께 사용하기

  @Override
  public Page<latestActivityListDTO> findAbnormalActivity(Pageable pageable){
    BooleanBuilder builder = new BooleanBuilder();
    builder.and(latestActivity.value.lt(10));
    final JPQLQuery<latestActivityListDTO> query = from(latestActivity)
        .where(builder)
        .select(new QlatestActivityListDTO(
            latestActivity.activityDate, latestActivity.cow, latestActivity.type,
            latestActivity.value));
    List<latestActivityListDTO> result = getQuerydsl().applyPagination(pageable, query).fetch();
    return new PageImpl<>(result, pageable, query.fetchCount());
  }

성능 개선을 위한 참고 사이트 - 주로 페이지 카운트 쿼리에 의해 성능이 떨어진다고 함
👉 https://ugo04.tistory.com/142
👉 https://wave1994.tistory.com/159

0개의 댓글