페이지네이션 구현하기

 부트스트랩의 페이지네이션 css를 이용하여 페이지네이션 기능 구현하기

 

 ☞ 부트스트랩 페이지네이션 : https://getbootstrap.kr/docs/5.2/components/pagination/

페이지네이션

 부트스트랩을 이용해서 페이지네이션의 골격은 만들었지만 이것을 토대로 내가 지금 클릭한 페이지를 기준으로 페이지가 변경하도록 바꾸고 싶었다.

 기본 코드

function paging(totalPage, currentPage = 1) {

  const pageCount = 5;

  let last = +currentPage + 2;

  if (currentPage < 3) {

    last = 5;

  }

  if (last > totalPage) {

    last = totalPage;

  }

  let first = last - (pageCount - 1);

  const next = last + 1;

  const prev = first - 1;

  if (totalPage < 1) {

    first = last;

  }

  const pages = document.getElementById('page-container');

  pages.innerHTML = '';

  if (first > 1) {

    const pageItem = document.createElement('li');

    pageItem.className = 'page-item';

    pageItem.innerHTML = `<a class="page-link" href="v1/community?page=${prev}">prev</a>`;

    pages.appendChild(pageItem);

  }

  for (let i = first; i <= last; i++) {

    const pageItem = document.createElement('li');

    pageItem.className = 'page-item';

    pageItem.innerHTML = `<a class="page-link" href="v1/community?page=${i}">${i}</a>`;

    // 이걸 기본코드로 사용하면 됨 : pageItem.innerHTML = `<a class="page-link" href="#">${i}</a>`;

    pages.appendChild(pageItem);

  }

  if (next > 5 && next < totalPage) {

    const pageItem = document.createElement('li');

    pageItem.className = 'page-item';

    pageItem.innerHTML = `<a class="page-link" href="v1/community?page=${next}">next</a>`;

    pages.appendChild(pageItem);

  }

}

 (a링크 안쪽 href는 백엔드에 요청하기 위한 쿼리스트링이다.)

선행과정 설명 :

1. 이번 프로젝트는 SSR로 구현하기로 백단과 이야기를 했었고 백단에서 게시판에 한 페이지에 받아올 데이터를 처리해서 보낸다.

2. 백단에서 받아오는 값은 총 페이지 수(totalPage)와 데이터인데 이 totalPage를 매개변수로 받아온다.

3. currentPage는 지금 내가 선택한 페이지를 받아오는 값이다. 

    let currentPage;

      const pagination = document.getElementById('page-container');

      if (!currentPage) {

        paging(maxIndex, currentPage);

      }

      pagination.addEventListener('click', function (e) {

        currentPage = e.target.innerHTML;

        paging(maxIndex, currentPage);

      });

☞ 여러가지 구현방법이 있겠지만 최대한 간단한 코드로 만들었다.

    - 먼저 page-container(페이지네이션을 담는 컨테이너)에 이벤트 리스너를 통해 내가 지금 클릭한 페이지의 번호를 받아온다.(currentPage)

    - 기본적으로 currentPage가 없다면 currentPage값이 없는 상태로 넘겨주고 함수에서 매개변수 default값을 1로 설정해서 함수를 불러온다.

 

나머지는 기본적으로 따라서 코드를 읽어보면 이해가 될 것 같다.