본문 바로가기
  • 삽질하는 자의 블로그
공부용-사이드프로젝트/Nodejs - 미니프로젝트-쇼핑몰

9. 간단한 페이지네이션(페이지 표시)을 추가해보았다.

by 이게뭐당가 2022. 10. 7.

뭔가 비어보인다 했더니 아래, 페이지 표시(페이지네이션)가 없었다. 바로 만들어보겠다.

VIEW에 페이지네이션이 들어갈 UL을 아래 살짝쿵 만들어준다.

 

1. li를 만드는 함수를 만들고,

(각 페이지 숫자의 앵커태그는

쿼리 스트링(query string)을 사용하여, 페이지를 넘길것이다.)

 

 

 

 

 

 

 

2. 서버에서 물건 데이터를 전부 받아와

 

 

3. 전체 물건갯수 / 8 (8개씩표시할거니까)

를 올림처리해서, 총 페이지네이션의 숫자갯수를 만든다.

 

 

 

 

4. 서버에서는 allProducts 라는 빈 배열을 만들어

  8개씩 끊어서 로드될때마다 넣어준다.

 

(저 시작과 끝 수 계산하는, 수학이 살짝쿵 막혀서 혼자 자조함)

 

시작수는 당연히 0, 7, 13... 으로가니까 

pagenumber*8 - 8 

 

끝수는 7,13...  으로 하면 좋겠지만!!

마지막 페이지에는 전부 표시되는게 아니므로

pagenumber*8 - ( 8- 총물품수 % 8) 을 하여 맞추었다.

 

그럼 페이지네이션의 수는 자동으로 물품수마다 계산되어 늘어날것이고

한 페이지에 물품은 자동으로 8개씩 끊어서 들어갈것이다.

CSS는 나중에 손보겠다. 이상!

댓글