Pagenation 현재 해당하는 페이지에만 select 클래스 적용

사용 언어 : Java 8
프레임워크 : Spring Boot, Thymeleaf, JPA

 

<3rdAssignment - result.html>

<!-- 페이징정보 시작-->
<div class="paging flex center">
    <ol class="flex">
        <!-- 첫 페이지로 -->
        <li>
            <a th:href="|/result?pageNum=1&search=${search}&searchType=${searchType}|">&lt;&lt;</a>
        </li>
        <!-- Prev Sign -->
        <li th:if="${pi.pageStart ne 1}"> <!-- ne(!=) -->
            <a th:href="|/result?pageNum=${pi.pageStart - 1}&search=${search}&searchType=${searchType}|">&lt;</a>
        </li>
    </ol>
    <ol class="page-list flex">
        <!-- pageStart ~ pageEnd 반복 -->
        <li th:each="pageNo:${#numbers.sequence(pi.pageStart,pi.pageEnd)}">
            <a th:href="|/result?pageNum=${pageNo}&search=${search}&searchType=${searchType}|">[[${pageNo}]]</a>
        </li>
    </ol>
    <ol class="flex">
        <!-- Next Sign -->
        <li th:if="${pi.pageEnd < pi.pageTotal}">
            <a th:href="|/result?pageNum=${pi.pageEnd + 1}&search=${search}&searchType=${searchType}|">&gt;</a>
        </li>
        <!-- 마지막 페이지로 -->
        <li>
            <a th:href="|/result?pageNum=${pi.pageTotal}&search=${search}&searchType=${searchType}|">&gt;&gt;</a>
        </li>
    </ol>
    <input type="hidden" id="p-length" th:value="${pi.pLength}">
</div>
<!-- 페이징정보 마지막-->

 

JPA를 사용하여 검색, 페이징 기능을 동시에 구현하는 프로젝트
기능은 구현을 다 해놨는데 마지막 css 적용에서 브레이크가 걸렸다

현재 페이지에 해당하는 숫자에만 select 클래스를 줘서 css를 적용하고 싶어

 

자바스크립트로 만드려고 고민고민을 하다가... 안돼서...
이 기회에 챗gpt 한 번 써보자! 하고 결심을 하게 됐다
(아주 좋은 기회였다!)

 

---

 

페이지네이션으로 며칠 고민하고 코드를 계속 수정하다보니 정신줄을 놔서 이런 실수를...!!
css 수정하고 !important 붙여주었음
챗gpt 고마워
이제 본격적인 질문

 

 

---

<!-- 페이징정보 시작-->
<div class="paging flex center">
    <ol class="flex">
        <!-- 첫 페이지로 -->
        <li>
            <a th:href="|/result?pageNum=1&search=${search}&searchType=${searchType}|">&lt;&lt;</a>
        </li>
        <!-- Prev Sign -->
        <li th:if="${pi.pageStart ne 1}"> <!-- ne(!=) -->
            <a th:href="|/result?pageNum=${pi.pageStart - 1}&search=${search}&searchType=${searchType}|">&lt;</a>
        </li>
    </ol>
    <ol class="page-list flex">
        <!-- pageStart ~ pageEnd 반복 -->
        <li th:each="pageNo:${#numbers.sequence(pi.pageStart,pi.pageEnd)}">
            <a th:href="|/result?pageNum=${pageNo}&search=${search}&searchType=${searchType}|" th:class="${pageNo == rent.getNumber()+1 ? 'select' : ''}">[[${pageNo}]]</a>
        </li>
    </ol>
    <ol class="flex">
        <!-- Next Sign -->
        <li th:if="${pi.pageEnd < pi.pageTotal}">
            <a th:href="|/result?pageNum=${pi.pageEnd + 1}&search=${search}&searchType=${searchType}|">&gt;</a>
        </li>
        <!-- 마지막 페이지로 -->
        <li>
            <a th:href="|/result?pageNum=${pi.pageTotal}&search=${search}&searchType=${searchType}|">&gt;&gt;</a>
        </li>
    </ol>
    <input type="hidden" id="p-length" th:value="${pi.pLength}">
</div>
<!-- 페이징정보 마지막-->

아 대박... key는 이거였음

th:class="${pageNo == rent.getNumber()+1 ? 'select' : ''}"

이전에도 이런 비슷한 코드를 작성한 적이 있었던 것 같은데 코드 좀 손에서 놓았다고
금방 이렇게 머릿속에서 호로록하고 날아가버리다니...

챗gpt!! 똑똑해 기특해 고마워... 반해버렸다

혼자 공부하면서 질문할 선생님이 없다는 건 꽤나 큰 산인데 아주 좋은 선생님을 찾았다

1. 충분히 고민하고 검색하고 시도할 것
2. 핵심을 간결히 전달할 것
3. 부족한 부분을 인지하고 개인 공부할 것

 

그래서 내가 앞으로 조금 더 공부할 부분은 >

페이징, 자바스크립트