[CSS, JSP] Bootstrap을 사용한 페이지네이션(active 클래스 적용)

이전에 작성해둔 게시판 페이징 처리를 부트스트랩의 페이지네이션 기능을 이용하여 CSS

2021.08.23 - [Java 및 JSP] - [JSP] 게시판 페이징 처리

[JSP] 게시판 페이징 처리

 

먼저 Bootstrap 홈페이지에서 CSS 링크를 copy해서 head 태그 내부에 작성

<link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
    crossorigin="anonymous">

 

기존에 작성된 페이지네이션 수정

<c:if test = "${pageDTO.hasBoard() }">
<!-- 이전 페이지 버튼 -->
<!-- 게시물이 있을 때만 나타날 수 있도록 게시물 유무를 확인하는 if문 아래 작성 -->
<ul class = "pagination justify-content-center">
    <c:if test = "${pageDTO.startPage > 10 }">
    <!-- ul 태그 아래 li 태그에 각 버튼이 보여짐 -->
        <li class = "page-item">
            <a class="page-link" href = "/프로젝트명/매핑한 주소?page=${pageDTO.startPage - 10 }">
                «
            </a>
        </li>
    </c:if>

<!-- 1부터 10까지의 버튼 나열 -->
    <c:forEach var = "pageNum" begin = "${pageDTO.startPage }" end = "${pageDTO.endPage }">
        <!-- if문을 작성해 현재 페이지가 pageNum과 동일하면 active 클래스가 추가된 리스트가 보여지도록 함 -->
        <c:if test = "${pageDTO.currentPage == pageNum }">
            <li class = "page-item active">
                <a class = "page-link" href = "/프로젝트명/매핑한 주소?page=${pageNum }">
                    ${pageNum }
                </a>
            </li>
        </c:if>
        
        <!-- 현재 페이지와 pageNum이 동일하지 않은 9개의 버튼은 active가 활성화되지 않은 리스트가 보여지도록 함 -->
        <c:if test = "${pageDTO.currentPage != pageNum }">
            <li class = "page-item">
                <a class = "page-link" href = "/프로젝트명/매핑한 주소?page=${pageNum }">
                    ${pageNum }
                </a>
            </li>
        </c:if>
    </c:forEach>

<!-- 다음 페이지 버튼 -->
    <c:if test = "${pageDTO.endPage < pageDTO.totalPages }">
        <li class = "page-item">
            <a class="page-link" href = "/프로젝트명/매핑한 주소?page=${pageDTO.startPage + 10 }">
                «
            </a>
        </li>
    </c:if>

부트스트랩 클래스가 작성된 ul > li  태그 내부에 기존에 있던 코드를 작성해주고, if 문으로 active된 버튼과 아닌 버튼을 구분해 작성