[Spring Boot] Pageable 인터페이스와 페이징(Paging) 처리

페이징(Paging) 처리

---

  (1) 전체 레코드(record) 수 => 'count(*)'
  (2) 전체 페이지 수 => 'PAGE_COUNT', 올림수
  (3) 한 페이지 당 뿌려질 레코드 수
  (4) 한 블럭당 뿌려질 페이지 수 => 'BLOCK_COUNT'

Pageable 인터페이스

---

데이터를 '페이지 단위'로 조회하는데 쓰이는 인터페이스

- 페이지 번호 (0부터 시작)*
- 페이지 크기 (한 페이지에 포함될 레코드 수)
- 정렬 기준

⭐. Pageable 객체: 데이터 조회 요청에 대한 정보를 담고 있다.

⭐. Pageable 객체를 생성하는 정적 팩토리 method, Pageable.of
  (페이지번호, 페이지크기, 정렬정보를 인자로 받는다.)

  Pageable pageable = Pageable.of(pageNumber, pageSize, sort);

⭐. Page 객체 (실제로 조회된 페이지의 데이터와 메타데이터 정보를 담고 있다)
  - (내장 method)
   - getContent(): [현재 page에 포함된 레코드]
   - getNumber(): [현재 page의 index 번호]
   - getSize(): [현재 page에 포함된 레코드 수]
   - getTotalElements(): [전체 레코드 수]
   - getTotalPages(): [전체 페이지 수]
   - hasContent(): [현재 page에 레코드가 포함되어 있는지 여부]
   - hasNext(): [다음 page 존재 여부]
   - hasPrevious(): [이전 page 존재 여부]
   - isFirst(): [현재 page가 첫번째인지 여부]
   - isLast(): [현재 page가 마지막인지 여부]

[BoardController.java]

  @Controller
  @RequestMapping("/board")
  @RequiredArgsConstructor
  public class FreeBoardController {
      private final FreeBoardService freeBoardService;
      private final static int PAGE_COUNT = 10;
      private final static int BLOCK_COUNT = 4;

      /**
       * 페이징 처리하기
       */
      @RequestMapping("/list")
      public void list(Model model, @RequestParam(defaultValue = "1") int nowPage) {
          Pageable pageable = PageRequest.of((nowPage - 1), PAGE_COUNT, Sort.Direction.DESC, "bno");
          Page<FreeBoard> pageList = freeBoardService.selectAll(pageable);
          int temp = (nowPage - 1) % BLOCK_COUNT;
          int startPage = nowPage - temp;

          model.addAttribute("pageList", pageList);
          model.addAttribute("blockCount", BLOCK_COUNT);
          model.addAttribute("nowPage", nowPage);
          model.addAttribute("startPage", startPage);
      }
  }

[product_list.html]

  <nav class="pagination-container">
    <div class="pagination">
      <th:block th:with="doneLoop=false"></th:block>
      <span th:if="${startPage > blockCount}">
        <a class="pagination-newer" th:href="@{|/board/list?nowPage=${startPage-1}|}">PREV</a>
      </span>

      <span class="pagination-inner">
        <th:block th:each="i : ${#numbers.sequence(startPage, (startPage-1) + blockCount}">
          <th:block th:if="${i-1 >= pageList.getTotalPages()}">
            <th:block th:with="doneLoop=true"></th:block>
          </th:block>
          <th:block th:unless="${doneLoop}">
            <a th:class="${i == nowPage ? 'pagination-active' : 'page' }"
               th:href="@{|/board/list(nowPage=${i})|}"
               th:text="${i}"></a>
          </th:block>  
        </th:block>
      </span>

      <span th:if="${(startPage + blockCount) <= pageList.getTotalPages()}">
          <a class="pagination-order"
           th:href="@{|/board/list?nowPage=${startPage + blockCount}|}">NEXT</a>
      </span>  
    </div>  
  </nav>  

[pagination.css]

  .pagination-container {
      margin: 1rem;
      text-align: center;
  }

  .pagination {
      position: relative;
      justify-content: center;
  }

  .pagination a {
      position: relative;
      display: inline-block;
      color: red;
      font-size: 1rem;
      padding: 0.5rem 1rem 0.5rem;
  }

  .pagination a:before {
      z-index: -1;
      position: absolute;
      height: 100%;
      width: 100%;
      content: "";
    top: 0;
    left: 0;
    background-color: #5F584C;
    border-radius: 24px;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: all 0.2s;
  }

  .pagination a:hover, .pagination a .pagination-active {
      color: #fff;
  }

  .pagination a:hover:before, .pagination a .pagination-active:before {
      -webkit-transform: scale(1);
      transform: scale(1);
  }

  .pagination .pagination-active {
      color: #fff;
  }

  .pagination .pagination-active:before {
      -webkit-transform: scale(1);
      transform: scale(1);
  }

  .pagination-newer {
      margin-right: 50px;
  }

  .pagination-older {
      margin-left: 50px;
  }

  a {
      color: inherit;
      text-decoration: none;
  }