[Spring Boot] 페이징이 어렵다고? 이렇게만 하세요 - 2

https://samori.tistory.com/41

[Spring Boot] 페이징이 어렵다고? 이렇게만 하세요

지난 글에 이어 

 

페이징이라면 마땅히 있어야 하는 첫페이지로 가기와 마지막 페이지로 가기, 한번에 몇페이지씩 이동하기 등등

페이징의 기능 개선에 대해 글을 써볼까 한다. 

먼저 위 글에서 제공한 샘플 페이징을 기반으로 설명을 진행하겠다.

 

<div class="pagination">
    <ul>
    
      <li th:if="${nowPage != 1}">
        <a class="btn" th:href="@{/조회 URL}+'?page='+${nowPage-1}"><</a>
      </li>
      
      <li th:if="${endPage != 0}" th:each="page:${#numbers.sequence(startPage, endPage)}">
        <a class="btn" th:if="${page != nowPage}" th:href="@{/조회 URL}+'?page='+${page}" th:text="${page}"></a>
        <strong class="btn" th:if="${page == nowPage}" th:text="${page}"></strong>
      </li>
      
      <li th:if="${endPage == 0}" th:each="page:${#numbers.sequence(startPage, 1)}">
        <a class="btn" th:if="${page != nowPage}" th:href="@{/조회 URL}+'?page='+${page}" th:text="${page}"></a>
        <strong class="btn" th:if="${page == nowPage}" th:text="${page}"></strong>
      </li>
      
      <li th:if="${nowPage < totalPage}">
        <a class="btn" th:href="@{/조회 URL}+'?page='+${nowPage+1}">></a>
      </li>
      
    </ul>
  </div>

 

CONTROLLER의 일부분

    int totalPage = p.getTotalPages();
    int nowPage = p.getPageable().getPageNumber() + 1;
    int startPage = Math.max(nowPage - 4, 1);
    int endPage = Math.min(nowPage + 4, p.getTotalPages());

 

 

첫 페이지는 startPage 가 아니다. 왜냐하면 현재페이지에서 -4를 한 것인데 -4로는 첫페이지로 가지 못하기 때문이다.

int startPage = Math.max(nowPage - 4, 1);

 

그러면 어떻게 해야할까? 발상의 전환을 해보자. 변수를 쓸 필요가 없다.

int totalPage = p.getTotalPages();

페이지를 직접 정해주면 된다.

<li th:if="${nowPage > 1}">
  <a class="btn" th:href="@{/selectCodeList/}+'?page=1'"><<</a>
</li>

마지막 페이지도 쉽다. 총 페이지를 나타내는 변수를 써주면 된다.

<li th:if="${nowPage < totalPage}">
    <a class="btn" th:href="@{/selectCodeList/}+'?page='+${totalPage}">>></a>
</li>

추가로 위 샘플 코드를 참고해서 페이징을 구현했을 경우 css를 만져야 하는데 css는 아래와 같다.

.pagination > ul {
    text-align: center;
    margin: auto;
}

.pagination > ul > li {
    list-style-type: none;
    display: inline-block;
}

.pagination > ul > li > .btn {
    width: 16px;
    padding-right: 22px;
    -webkit-user-select: none;
}

.pagination > ul > li > a {
    text-decoration: none;
    color: black;
}

.pagination > ul > li > strong {
    font-weight: bold;
    border: solid #6c757d 2px;
}