이전에 블로깅한 페이지네이션 구현하기 게시물에서 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;
const endPage = startPage + pageRangeDisplayed - 1 > totalPage ? totalPage : startPage + pageRangeDisplayed - 1;
<
버튼 클릭시 activePage가 1보다 큰 경우, paginate(activePage-1)>
버튼 클릭시 activePage가 totalPage
보다 작은 경우, paginate(activePage+1)reference