오늘 배운 것

• 페이징(2)
• 검색기능(1)

페이징(2)

• 현재페이지와 나열한 a태그가 동일하면 'active'클래스를 추가하도록 함
• 10개씩 페이지를 표시하고 이전이나 이후에 페이지가 있으면 <,> 표시하도록 함
  예를 들면 현재페이지가 12페이지면 <,> 둘 다 존재하고 2페이지면 >만 존재함

<!-- 페이지네이션-->
            <nav aria-label="Page navigation" th:if="${pmk.endPage > 0}">
              <ul class="pagination justify-content-center mt-5">
                <li class="page-item" th:if="${pmk.prev}">
                  <a class="page-link" th:href="@{/board/list} + '?pageNum=__${pmk.startPage-1}__'" aria-label="이전">
                    <span class="material-icons">
                      keyboard_arrow_left
                    </span>
                    <span class="sr-only">Previous</span>
                  </a>
                </li>
                <li class="page-item" th:classappend="${pmk.cri.pageNum == number} ? 'active' : ''" th:each="number : ${#numbers.sequence(pmk.startPage, pmk.endPage)}">
                  <a class="page-link" th:href="@{/board/list} + '?pageNum=__${number}__'" th:text="${number}"></a>
                </li>
                
                <li class="page-item" th:if="${pmk.next}">
                  <a class="page-link" th:href="@{/board/list} + '?pageNum=__${pmk.endPage+1}__'" aria-label="다음">
                    <span class="material-icons">
                      keyboard_arrow_right
                    </span>
                    <span class="sr-only">Next</span>
                  </a>
                </li>
              </ul>
            </nav>

검색기능(1)

• 검색 시 페이지를 이동하더라도 검색어가 초기화되지 않도록 페이지 이동시 검색어를 유지

         <div class="d-flex justify-content-center mt-2">
            <div class="w-md-25 w-sm-50 input-group input-group-outline is-filled">
              <label class="form-label">search here...</label>
              <input type="text" id="searchKeyword" th:value="${pmk.cri.keyword}" class="form-control" />
              <button id="searchButton" class="btn btn-primary mb-0">검색</button>
            </div>
          </div>

<script>
      const pageLinks = document.querySelectorAll('ul.pagination .page-link');
      pageLinks.forEach((link) => {
        link.addEventListener('click', function (e) {
          e.preventDefault();
          let keyword = ''; //키워드가 있을 경우 키워드 추가
          if (searchKeyword.value.trim()) keyword = '&keyword=' + searchKeyword.value;

          location.href = this.getAttribute('href') + keyword;
        });
      });
</script>