페이징 처리

[주인장]

<!-- 페이징 기능 추가 -->

<!-- 코드는 먼저 paging 객체가 비어 있지 않은지 확인합니다. 이를 통해 페이징 데이터가 없는 경우 페이징 UI를 렌더링하지 않도록 합니다. -->

<div th:if="${!paging.isEmpty()}">

    <!-- startPage와 endPage는 현재 페이지 번호(paging.number)를 기준으로 계산됩니다. startPage는 현재 페이지 번호를 10으로 나눈 뒤 10을 곱해 계산되며, endPage는 총 페이지 수(paging.totalPages)와 비교하여 적절한 값을 설정합니다.-->

    <th:block th:with="startPage=${(paging.number/10) * 10},

    endPage=(${(paging.totalPages == 0) ? 1 : (startPage + 9 < paging.totalPages ? startPage + 9 : paging.totalPages - 1)})">

    <ul class="pagination justify-content-center">

        <!-- 처음 버튼: 첫 번째 페이지로 이동하는 버튼입니다. 현재 페이지가 첫 페이지(paging.number == 0)인 경우 disabled 클래스를 추가하여 비활성화합니다.-->

        <li class="page-item" th:classappend="${paging.number == 0} ? 'disabled'">

        <a class="page-link" href="xxjavascript:void(0)" th:data-page="0">

            <span>처음</span>

        </a>

        </li>

        <!-- 이전 버튼: 이전 페이지로 이동하는 버튼입니다. 이전 페이지가 없는 경우(!paging.hasPrevious), disabled 클래스를 추가합니다. -->

        <li class="page-item" th:classappend="${!paging.hasPrevious} ? 'disabled'">

        <a class="page-link" href="xxjavascript:void(0)" th:data-page="${paging.number-1}">

            <span>이전</span>

        </a>

        </li>

        <!-- 페이지 번호 버튼: startPage부터 endPage까지의 페이지 번호를 반복 렌더링합니다. 현재 페이지는 active 클래스를 추가하여 강조합니다. -->

        <li th:each="page: ${#numbers.sequence(startPage, endPage)}"

            th:classappend="${page == paging.number} ? 'active'" class="page-item">

        <a th:text="${page + 1}" class="page-link" href="xxjavascript:void(0)" th:data-page="${page}"></a>

        </li>

        <!-- 다음 버튼: 다음 페이지로 이동하는 버튼입니다. 다음 페이지가 없는 경우(!paging.hasNext), disabled 클래스를 추가합니다 -->

        <li class="page-item" th:classappend="${!paging.hasNext} ? 'disabled'">

        <a class="page-link" href="xxjavascript:void(0)" th:data-page="${paging.number+1}">

            <span>다음</span>

        </a>

        </li>

        <!-- 마지막 버튼: 마지막 페이지로 이동하는 버튼입니다. 현재 페이지가 마지막 페이지인 경우(paging.number == paging.totalPages-1), disabled 클래스를 추가합니다. -->

        <li class="page-item" th:classappend="${paging.number == paging.totalPages-1} ? 'disabled'">

        <a class="page-link" href="xxjavascript:void(0)" th:data-page="${paging.totalPages-1}">

            <span>마지막</span>

        </a>

        </li>

    </ul>

    </th:block>

</div>

<form th:action="@{/question/list}" method="get" id="searchForm">

    <input type="hidden" id="page" name="page" th:value="${paging.number}">

    </form>

    <a th:href="@{/question/create}" class="btn btn-primary">질문 등록</a>

</div>

<script layout:fragment="script" type='text/javascript'>

    const page_elements = document.getElementsByClassName("page-link"); // 문서에서 page-link 클래스를 가진 모든 요소를 선택

    Array.from(page_elements).forEach(function (element) {

        element.addEventListener('click', function () { // forEach 메서드를 사용하여 각 page-link 요소에 대해 클릭 이벤트 리스너를 추가

            document.getElementById('page').value = this.dataset.page;  // 클릭 이벤트가 발생하면, 해당 버튼의 data-page 속성 값을 읽어와 숨겨진 폼 필드 page의 값으로 설정

            document.getElementById('searchForm').submit(); // 사용자가 선택한 페이지 번호가 서버로 전송

        });

    });

</script>