10. JPA 를 사용한 페이징(Paging) 처리

JPA 에서 제공하는 메서드를 통해 페이징 처리를 해본다.

 

우선 /companyList 페이지로 이동하면 companyList.html 페이지로 이동할 수 있도록 Controller 에 등록해준다.

 

Pageable 를 생성해서 Service 에 만들어놓은 getCompanyPage 메서드에 넘겨준다. 그러면 Service 에서는 이를 받아서 페이징을 하면서데이터를 조회한다. 이때 page 는 0 부터 시작하기 때문에 1, 2, 3.... 을 누르면 -1 처리를 해서 0, 1, 2... 로 page 값을 가공한다.

 

그리고 page 를 pageRequest 로 만들어준다. 이때, 한 페이지의 데이터 수, 정렬기준 등등을 설정할 수 있다.

이후 JPA 의 findall 메서드를 이용해 자동으로 페이징 처리된 내용을 만들어 return 한다.

 

Controller 에서는 이것을 Page<Company> 타입의 companyList 에 받아 model 담은 후 View 로 넘겨준다. 그러면 페이징이 반영된 페이지 처리를 할 수 있다.

BasicController.java

    @RequestMapping("/companyList")
    public String companyList(@PageableDefault Pageable pageable, Model model) {
        Page<Company> companyList = companyService.getCompanyPage(pageable);
        model.addAttribute("companyList", companyList);
        return "companyList";
    }

CompanyService.java

    public Page<Company> getCompanyPage(Pageable pageable) {
        int page = (pageable.getPageNumber() == 0) ? 0 : (pageable.getPageNumber() - 1);
        pageable = PageRequest.of(page, 10, Sort.by(Sort.Direction.DESC, "id"));
        return companyRepository.findAll(pageable);
    }

 

이제는 View 화면을 구현해본다.

 

companyList.html

일단 테이블을 만들어 companyList 를 반복시킨 후 id, companyName, companyNation 이 차례로 출력되도록 한다.

<table border="1">
  <tr>
    <th>idx</th>
    <th>company name</th>
    <th>company nation</th>
  </tr>
  <tr th:each="company: ${companyList}">
    <td th:text="${company.id}"></td>
    <td th:text="${company.companyName}"></td>
    <td th:text="${company.companyNation}"></td>
  </tr>
</table>

(1) <ul> 쪽에서 페이지 숫자를 계산하고, 각 link 를 통해 페이지의 유저가 클릭한 페이지 숫자를 담아 컨트롤러로 보낸다.

 

(2) 첫 번째 페이지로 가는 링크이다. page 값에 1을 부여한다.

(3) 이전 페이지로 가는 링크이다. first 가 true 이면 # 를 통해 이동 못하게 막고, 아니라면 companyList.number 로 이동하도록 한다.

(4) 숫자를 직접 클릭해서 갈 수 있는 링크이다. ul 에서 계산한 start 부터 last 까지 반복해서 출력 후 각 숫자를 누르면 해당 숫자의 페이지로 이동하도록 한다.

(5) 다음 페이지로 가는 링크이다. last 가 true 이면 # 를 통해 이동 못하게 막고, 아니라면 companyList.number 로 이동하도록 한다.

(6) 마지막 페이지로 가는 링크이다. page 값에 totalPages 값을 부여한다.

 

<nav style="text-align: center">

<!--(1)-->
  <ul class="pagination"
    th:with="start=${T(Math).floor(companyList.number/10) * 10 + 1},
              last=${start + 9 < companyList.totalPages ? start + 9 : companyList.totalPages}">
              
<!--(2)-->
    <li>
      <a th:href="@{./companyList(page=1)}" aria-label="First">
        <span aria-hidden="true"> FIRST </span>
      </a>
    </li>
    
<!--(3)-->
    <li th:class="${companyList.first} ? 'disabled'">
      <a th:href="${companyList.first} ? '#' : @{./companyList(page=${companyList.number})}" aria-label="Previous">
        <span aria-hidden="true">&lt;</span>
      </a>
    </li>
    
<!--(4)-->
  	<li th:each="page: ${#numbers.sequence(start, last)}" th:class="${page == companyList.number + 1} ? 'active'">
    	<a th:text="${page}" th:href="@{./companyList(page=${page})}">&nbsp;</a>
  	</li>
  
<!--(5)-->
    <li th:class="${companyList.last} ? 'disabled'">
      <a th:href="${companyList.last} ? '#' : @{./companyList(page=${companyList.number + 2})}" aria-label="Next">
        <span aria-hidden="true">&gt;</span>
      </a>
    </li>
    
<!--(6)-->
    <li>
      <a th:href="@{./companyList(page=${companyList.totalPages})}" aria-label="Last">
        <span aria-hidden="true">LAST</span>
      </a>
    </li>
  </ul>
</nav>

 

출처 : fastcampus.co.kr/courses/204729/clips/