Skip to content

[관리자 페이지] client with Thymeleaf

Jump to bottom
YoonTaeMin edited this page Apr 27, 2023 · 6 revisions

게시글 페이징 처리

게시글 목록 페이징 처리

Thymeleaf에 서 페이지 번호 버튼을 동적으로 생성하였습니다. 페이지 번호버튼은 5개 단위로 구성되며, 이전 과 다음 버튼이 존재합니다. 이전 과 다음 버튼은 다음페이지가 존재하거나 이전페이지가 존재하는 경우에만 생성됩니다.
예시)
스크린샷 2023-04-27 오전 12 52 14

         <ul class="pagination pagination-sm">
            <!--            이전 버튼-->
            <li class="page-item" th:if="${pageCom gt 0}">
                <a class="page-link"
                   th:href="@{/admin/board/fix(filter=${param.filter}, keyword=${param.keyword}, page=((5 *${pageCom})-1))}">
                    이전</a>
            </li>
            <!--            데이터 존재 x 경우-->
            <li class="page-item" th:if="${boardList.totalPages eq 0}">
                <a class="page-link active" href="#">1</a>
            </li>
            <!--            마지막 페이지가 속해 있지 않은 경우-->
            <li class="page-item" th:if="${boardList.totalPages gt 5*(pageCom + 1) and boardList.totalPages gt 0}"
                th:each="num : ${#numbers.sequence(pageCom*5 + 1 , 5*(pageCom + 1))}">
                <a class="page-link active" th:if="${num eq boardList.pageable.pageNumber+1}"
                   th:href="@{/admin/board/fix(filter=${param.filter}, keyword=${param.keyword}, page=${num}-1)}"
                   th:text="${num}">num</a>
                <a class="page-link" th:unless="${num eq boardList.pageable.pageNumber+1}"
                   th:href="@{/admin/board/fix(filter=${param.filter}, keyword=${param.keyword}, page=${num}-1)}"
                   th:text="${num}">num</a>
            </li>
            <!--            마지막 페이지가 속해있는 경우-->
            <li class="page-item" th:if="${boardList.totalPages le 5*(pageCom + 1) and boardList.totalPages gt 0}"
                th:each="num : ${#numbers.sequence(pageCom*5 + 1, boardList.totalPages)}">
                <a class="page-link active" th:if="${num eq boardList.pageable.pageNumber+1}"
                   th:href="@{/admin/board/fix(filter=${param.filter}, keyword=${param.keyword}, page=${num}-1)}"
                   th:text="${num}">num</a>
                <a class="page-link" th:unless="${num eq boardList.pageable.pageNumber+1}"
                   th:href="@{/admin/board/fix(filter=${param.filter}, keyword=${param.keyword}, page=${num}-1)}"
                   th:text="${num}">num</a>
            </li>
            <!--            다음 버튼-->
            <li class="page-item" th:if="${(boardList.totalPages / (5.0 *(pageCom+1))) gt 1}">
                <a class="page-link"
                   th:href="@{/admin/board/fix(filter=${param.filter}, keyword=${param.keyword}, page=(5 *(${pageCom}+1)))}">
                    다음</a>
            </li>
        </ul>

공통

  • 우선, 서버에서 pageNumber/5(변수이름: pageCom) 를 한 값을 넘겨줍니다.(페이징처리의 기준값)
  • 기준값에 의해서 페이지 번호버튼을 생성 후, page변수를 쿼리스트링에 담아 서버에 요청합니다.
  • pageable 클래스에 경우, page 번호가 0부터 시작되는 것을 인지합니다. (!!)

이전페이지가 존재하는 경우

  • pageCom이 0보다 큰 경우 :1~5페이지의 경우 pageCom값은 0, 6페이지 이상부터 1

다음페이지가 존재하는 경우

  • 전체 페이지수를 (pageCom+1)*5.0 으로 나눈 값이 1보다 큰 경우
  • 현재 페이지가 6이고, 전체페이지 수가 11인 경우, 조건에 의해서 다음 페이지가 생성됩니다.

관리자가 보고있는 페이지버튼 (1-5페이지 or 6-10페이지 or ...) 에 마지막 페이지가 속해있는 경우

  • (pageCom+1)*5 값이 전체페이지수보다 크거나 같은 경우 and 데이터가 하나라도 존재하는 경우
  • 페이지버튼이 마지막 페이지버튼 까지만 생성합니다.

관리자가 보고있는 페이지버튼 (1-5페이지 or 6-10페이지 or ...) 에 마지막 페이지가 속해있지 않은 경우

  • (pageCom+1)*5 값이 전체페이지수보다 작은 경우 and 데이터가 하나라도 존재하는 경우
  • 페이지버튼이 현재 페이지가 속해있는 범위의 페이지가 모두 출력됩니다. ex) 7페이지 -> 6-10 페이지 출력

Issue. Type Error

상황: th:value 값에 board 엔티티를 그대로 서버에 전달하였지만, Thymealeaf에서 server로 전달되는 값은 object의 주소값이 string형태로 전달되서 타입매칭에러가 발생
해결: 엔티티 그대로 넘기지 않고, board.id(Long) 값을 전달하여 해결

Clone this wiki locally