Pagination

페이지네이션이란 콘텐츠를 여러 페이지고 나누고, 이전 혹은 다음 페이지로 넘어가거나 특정 페이지로 넘어갈 수 있는 일련의 링크를 페이지 상단이나 하단에 배치하는 방법을 말한다.

구글 Pagination )

고려 사항

• 한 페이지당 페이지 링크 개수
• 한 페이지당 게시물 수
• 이전, 다음 버튼 유 무
• 처음, 마지막 버튼 유 무

게시판 페이지 처리 기본 과정 (Oracle)

• 1. 전체 게시물의 개수를 가져온다. (totalCount)

select count(*) as totalCount from board

• 2. 한 페이지에 몇 개의 게시글을 보여줄지를 정한다. (listCount) ex) 10개, 20개씩 보여준다(totalCount)

• 3. 게시판이 몇 개의 페이지를 가지는지 구할 수 있다. (총 페이지 수, totalCount)totalPage = totalCount / listCount
  나눠떨어지지 않는 경우에 추가로 페이지가 하나 더 있어야 하므로 +1을 해준다.

const totalCount = /*DB접속후 쿼리를 통해 얻은 값*/; 
const listCount = 10; 
const totalPage = totalCount / listCount; 
if (totalCount % listCount > 0) {
	totalPage++;
}

url에서 임의로 page수를 바꿀 수 있으므로 총 페이지 수 보다 높은 페이지를 접근 못하게 예방한다.

//page = 현재 보고있는 페이지
if (totalPage < page) {   
	page = totalPage;
}

• 4. 하단에 페이지 번호들을 몇 개 보여줄지 정한다. (pageCount 10개=> 1~10페이지, 11~20페이지, ...)
• 5. 시작페이지와 끝페이지를 계산한다.

const startPage = ((page - 1) / pageCount) * pageCount + 1;
//현재 페이지가 pageCount와 같을 때를 유의하며 (page-1)을 하고
// +1은 첫페이지가 0이나 10이 아니라 1이나 11로 하기 위함임
const endPage = startPage + pageCount - 1;
// -1은 첫페이지가 1이나 11 등과 같을때 1~10, 11~20으로 지정하기 위함임

• 6. 5와 같이 끝페이지를 계산해버리면 totalPage(총 페이지 수)보다 크게 잡힐 위험이 있으니 그것을 처리함.
  

if (endPage > totalPage) {    
  endPage = totalPage;
}

• 7. 현재 페이지(page)를 가지고 시작 페이지와 끝 페이지를 동적 계산하도록 변경되었으므로 현재페이지를 자유롭게 옮겨다닐 수 있도록 [처음][이전] /1,2,3,4,...,10/ [다음][끝] 링크를 만듦.

참조

• https://jeong-pro.tistory.com/88