3-02 : paging

단 하나의 맥락

: questionList를 부분 로드함으로써, 가독성 강화

 

---

Semiflow Bundle

- 대량 테스트 데이터 만들기

- 변수를 questionList에서 paging으로 변경

- 템플릿에 페이지 이동 기능 구현하기

- 페이지 리스트

- 작성일시 역순으로 조회

 

---

테스트 데이터 작성하기 위해

 

> sbbApplicationTest.java에서

 

- OS : for (int i = 1; i <= 300; i++) {}

- A1 : String subject = String.format("테스트 데이터입니다:[%03d]", i);

- A2 : String content = "내용무";

- A3 : this.questionService.create(subject, content);

 

 및 실행

 

 

-

 

 

페이징 구현하기 위해

 

> QuestionRepository에서

• Page<Question> findAll(Pageable pageable); 선언

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

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

 

 

-

 

 

> QuestionService에서

 

public Page<Question> getList(int page) { } 

• A1 : Pageable pageable = PageRequest.of(page, 10);
• A2 : return this.questionRepository.findAll(pageable);

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

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

// import org.springframework.data.domain.PageRequest;

 

* Tilted Waterfall

 

-

 

 

> QuestionController에서

 

public String list

• S : (Modle model, @RequestParam(value="page", defaultValue="0") int page) // 기존 Model만에서 추가
• A1 : Page<Question> paging = this.questionService.getList(page); // 기 List<Question>에서 변경
• A2 : model.addAttribute("paging", paging); // signal을 "questionList", questionList에서 변경
• A3 : return "question_list";

*축이 하나 늘어나면서, signal이 더 세밀화됨

 

 

-

 

 

변수가 questionList에서 paging이 되었으므로

> question_list.html에서

• <tr th:each="question, loop :${paging}">으로 변경

 

 

-

 

 

템플릿에 페이지 이동 기능을 구현하기 위해

 

> question_list.html 에서

 

틀

• <div th:if="${!paging.isEmpty()}"></div> 내부에
• <ul class="pagination  justify-content-center"></ul> 

 

이전

• <li class="page-item"  th:classappend="${!paging.hasPrevious} ? 'disabled'"></li>  위상공간 내부에
• <a class="page-link"  th:href="@{|?page=${paging.number-1}|}"></a>  링크 내부에
• <span>이전</span> 내용 구현

 

번호 이동 버튼

• <li th:each="page: ${#numbers.sequence(0, paging.totalPages-1)}"
• th:classappend="${page == paging.number} ? 'active' "
• class="page-item"></li> 로 넘버시퀀스 및 부분 활성화 내부에
• <a th:text="${page}"  class="page-link"  th:href="@{|?page=${page}|}"></a> 링크 구현

 

다음

• <li class="page-item"  th:classappend="${!paging.hasNext} ? 'diabled'"></li>  위상공간 내부에
• <a class="page-link". th:href="@{|?paging=${paging.number+1|}">  링크 내부에
• <span>다음</span> 버튼 구현

 

 

-

 

 

페이지 이동 기능에 부분만 보이기 추가

 

> question_list.html에

• th:if="${page >= paging.number-5  and  page <= paging.number+5}" 를
• <li th:each="page : ${#numbers.sequence(0, paging.totalPages-1)}" 와
• th:classappend ="${page == paging.number} ? 'active' "> 사이에 추가

 

 

-

 

 

최신 등록 질문이 최상단에 올라오게 하기 위해(역순)

 

> QuestionService에서 

 

public Page<Question> getList(int page)

• A1 : List<Sort.Order> sorts = new ArrayList<>;
• A2 : sorts.add(Sort.Order.desc)("createDate"));
• A3 : Pageable pageable = PageRequest.of(page, 10, Sort.by(sorts));
• A4 : return this.questionRepository.findAll(pageable);

// import java.util.ArrayList;

// import java.util.List;

// import org.springframework.data.domain.Sort;