[JavaScript]Pagination 구현하기

Pagination이란?

 

페이지네이션은 콘텐츠를 여러 페이지로 나누어 다음 또는 이전 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소

리스트가 많아 한 화면에 과도한 스크롤 발생이 예상되는 경우 적용

 

[html] 

   <div class="contents-manage" id="contentGrid">
   		<div class="content-card">
               <!--화면에 표시할 항목들 -->
        </div>
   </div>
   <div class="pagination" id="pagination"> </div>
            <!-- JS에서 구현 -->
   </div>

 

[js]

1. 페이지 항목 수 설정 및 요소 가져오기

// 한 페이지에 표시할 항목 수 설정
const itemsPerPage = 4;
// 현재 페이지를 추적하는 변수 초기화
let currentPage = 1;

// 콘텐츠 카드가 담긴 컨테이너 요소 선택
const contentGrid = document.getElementById("contentGrid");
// 페이지네이션 버튼이 표시될 컨테이너 요소 선택
const pagination = document.getElementById("pagination");

// 모든 콘텐츠 카드 요소를 배열로 변환하여 가져옴
const items = Array.from(document.querySelectorAll(".content-card"));

 

2. 특정 페이지에 해당하는 항목만 화면에 표시하는 함수 호출

 

end는 현재 페이지에서 표시할 항목의 마지막 인덱스를 포함하지 않는 범위의 끝 값

 즉, JavaScript에서 slice 메서드를 사용할 때처럼, end는 범위에 포함되지 않기 때문에

start부터 end - 1까지의 항목이 선택됨.

function displayItems(page) {
  // 현재 페이지의 시작 인덱스와 끝 인덱스 계산
  const start = (page - 1) * itemsPerPage;
  const end = start + itemsPerPage;

  // 모든 항목을 순회하면서, 현재 페이지 범위에 속하는 항목만 표시하고 나머지는 숨김
  items.forEach((item, index) => {
    item.style.display = index >= start && index < end ? "block" : "none";
  });
}

 

3. 페이지네이션 버튼을 설정하는 함수 / 이전 및 다음 페이지 버튼 생성

- totalItems: 총 항목의 개수

 

- itemsPerPage: 한 페이지에 표시할 항목의 수

 

- Math.ceil을 사용해 올림 처리하여, 마지막 페이지에 일부 항목만 있더라도 페이지를 생성할 수 있도록 함

 

- prevBtn.classList.add("nav-btn"); → 클래스 추가 (이유 : css에서 스타일을 적용하기 위해)

 

-  setupPagination(totalItems, itemsPerPage);

→  페이지네이션 다시 설정 (이유 : 페이지가 변경될 때마다 버튼의 상태를 업데이트하기 위해서. 구체적으로 말해서, 활성화된 페이지 버튼에 active 클래스를 적용하고, "이전" 및 "다음" 버튼을 비활성화하거나 활성화하는 작업을 해야 하기 때문  )

 

- pagination.appendChild(pageBtn); → 페이지 번호 버튼을 페이지네이션 컨테이너에 추가

                                                                 (실제 화면에 버튼이 표시되도록 함)

// 페이지네이션 버튼을 설정하는 함수
// totalItems : 총 항목의 개수
function setupPagination(totalItems, itemsPerPage) {
  // 총 페이지 수 계산
  const pageCount = Math.ceil(totalItems / itemsPerPage);
  // 페이지네이션 버튼 컨테이너 초기화 (이전에 생성된 버튼 제거)
  pagination.innerHTML = "";

  // 이전 페이지 버튼 생성
  const prevBtn = document.createElement("button");
  prevBtn.classList.add("nav-btn"); // 클래스 추가
  prevBtn.textContent = "이전"; // 버튼 텍스트 설정
  prevBtn.disabled = currentPage === 1; // 첫 페이지일 때 비활성화
  prevBtn.addEventListener("click", () => {
    // 현재 페이지가 1보다 클 때만 페이지를 감소시킴
    if (currentPage > 1) {
      currentPage--; // 현재 페이지 감소
      displayItems(currentPage); // 새로운 페이지 항목 표시
      setupPagination(totalItems, itemsPerPage); // 페이지네이션 다시 설정
    }
  });
  pagination.appendChild(prevBtn); // 이전 버튼을 페이지네이션 컨테이너에 추가

  // 페이지 번호 버튼 생성
  for (let i = 1; i <= pageCount; i++) {
    const pageBtn = document.createElement("button");
    pageBtn.classList.add("page-btn"); // 클래스 추가
    pageBtn.textContent = i; // 버튼에 페이지 번호 표시

    // 현재 페이지와 일치하는 버튼에 'active' 클래스 추가
    if (i === currentPage) {
      pageBtn.classList.add("active");
    }

    pageBtn.addEventListener("click", () => {
      // 클릭된 페이지 번호로 현재 페이지 업데이트
      currentPage = i;
      displayItems(currentPage); // 새로운 페이지 항목 표시
      setupPagination(totalItems, itemsPerPage); // 페이지네이션 다시 설정
    });

    pagination.appendChild(pageBtn); // 페이지 번호 버튼을 페이지네이션 컨테이너에 추가
  }

  // 다음 페이지 버튼 생성
  const nextBtn = document.createElement("button");
  nextBtn.classList.add("nav-btn"); // 클래스 추가
  nextBtn.textContent = "다음"; // 버튼 텍스트 설정
  nextBtn.disabled = currentPage === pageCount; // 마지막 페이지일 때 비활성화
  nextBtn.addEventListener("click", () => {
    // 현재 페이지가 총 페이지 수보다 작을 때만 페이지를 증가시킴
    if (currentPage < pageCount) {
      currentPage++; // 현재 페이지 증가
      displayItems(currentPage); // 새로운 페이지 항목 표시
      setupPagination(totalItems, itemsPerPage); // 페이지네이션 다시 설정
    }
  });
  pagination.appendChild(nextBtn); // 다음 버튼을 페이지네이션 컨테이너에 추가
}

 

 

4. 초기 데이터와 페이지네이션 설정

displayItems(currentPage); // 첫 페이지의 항목을 표시
setupPagination(items.length, itemsPerPage); // 페이지네이션 버튼을 초기화