pagination paging 오류해결

이전에 블로깅한 페이지네이션 구현하기 게시물에서 2번째 방법 중, 1~5까지의 페이징리스트에서 > 버튼 클릭시, 페이징이 넘어가지 않는 문제가 발생했다.

//기존
const pageNumbers = [];
const toalPages = Math.ceil(totalItemsCount/itemsCountPerPage);
const maxPage = pageRangeDisplayed; 
let pages = 0;
if(totalPages < maxPage) {
  pages = totalPage;
}else{
  pages = maxPage;
}

for(let i=1; i<=pages; i++){ 
  pageNumbers.push(i);
}

//변경
const pageNumbers = [];
const totalPage = Math.ceil(totalItemsCount / itemsCountPerPage); //필요한 모든 페이지 페이지 개수

const startPage =
      Math.floor((activePage - 1) / pageRangeDisplayed) * pageRangeDisplayed + 1;

const endPage =
      startPage + pageRangeDisplayed - 1 > totalPage
? totalPage
: startPage + pageRangeDisplayed - 1;
for (let i = startPage; i <= endPage; i++) {
  pageNumbers.push(i);
}

const handlePrev = () => {
  activePage > 1 ? paginate(activePage - 1) : paginate(activePage);
};
const handleNext = () => {
  activePage < totalPage ? paginate(activePage + 1) : paginate(activePage);
};

페이지네이션 설정

• pageRangeDisplayed : 5로 설정할 경우, 1~5, 5~10의 페이징이 5개씩 노출된다.
• totalPage : 필요한 모든 페이지 개수
• totalItemsCount : 보여줄 모든 데이터의 개수
• itemsCountPerPage : 한 페이지에 보여줄 데이터의 개수
• paginate : 부모 컴포넌트로부터 내려받은 setPage

원인

기존에는, 페이징을 i부터 pages까지 만들었다. pageRangeDisplayed보다 필요한 페이지 개수가 많을 경우, pageRangeDisplayed로 고정시켜놓았기 때문에, >을 누르더라도 1~5페이지까지만 보였다. (단, 6,7,8.. 페이지네이션 기능은 작동함)

해결

• const startPage = Math.floor((activePage - 1) / pageRangeDisplayed) * pageRangeDisplayed + 1;
  • 1~5페이지는 startPage가 1, 6~10페이지는 startPage가 6, 11~15페이지는 startPage가 11
• const endPage = startPage + pageRangeDisplayed - 1 > totalPage ? totalPage : startPage + pageRangeDisplayed - 1;
  • 마지막 페이지는 startPage+pageRangeDisplayed-1이지만, totalPage보다 큰 경우, totalPage가 마지막 페이지가 되도록 한다.
• < 버튼 클릭시 activePage가 1보다 큰 경우, paginate(activePage-1)
• > 버튼 클릭시 activePage가 totalPage보다 작은 경우, paginate(activePage+1)

reference

• https://zepinos.tistory.com/28