🔎Pagination이란?
페이징(Paging)이라고도 불리며, 콘텐츠나 데이터를 여러 페이지로 나누어서 특정 페이지로 이동하거나 이전/다음 페이지로 이동할 수 있는 기능을 말한다.
📋페이지네이션 개발에 필요한 4가지 값
- 총 페이지수
총페이지수 = Math.ceil(데이터의 전체 길이/한 페이지에 보여줄 데이터 개수)
- 화면에 보여질 페이지 그룹
화면에 보여질 페이지 그룹 = Math.ceil(현재 페이지 번호/한 화면에 보여질 페이지 개수)
총 데이터 개수가 10개, 한 화면에 보여질 페이지 개수가 3개라면?
그룹 1 -> 1~3
그룹 2 -> 4~6
그룹 3 -> 7~9
그룹 4 -> 10
- 화면에 보여질 페이지의 첫번째 페이지 번호
어떤 페이지 그룹의 첫번째 페이지 번호 = ((페이지 그룹 - 1) * 한 화면에 보여질 페이지 개수) + 1
- 화면에 보여질 페이지의 마지막 페이지 번호
어떤 페이지 그룹의 마지막 페이지 번호 = 페이지 그룹 한 화면에 보여질 페이지 개수
-> 만약, 페이지 그룹 한 화면에 보여질 페이지 개수의 값이 전체 페이지보다 크다면 전체 페이지가 마지막 페이지 번호
💻페이지네이션 구현
만들어놓은 쇼핑몰 홈페이지의 메인페이지에 페이지네이션을 추가해야한다.
쇼핑몰의 메인페이지에는 카테고리 메뉴가 존재하여 클릭한 메뉴에 해당하는 타입인 상품들이 나온다.
1. 필요한 4가지값 개산
한페이지에 보여줄 데이터 개수(conCount): 6
한 화면에 보여질 페이지 개수(PAGE): 5
// 총 페이지 수
totalPage = Math.ceil(datalength / conCount);
// 화면에 보여질 페이지 그룹
pageGroup = Math.ceil(nowPage / PAGE);
// 화면에 보여질 첫번째 페이지
first = (pageGroup - 1) * PAGE + 1;
// 화면에 보여질 마지막 페이지
last = pageGroup * PAGE;
if (last > totalPage) {
last = totalPage;
};2. 페이지네이션 버튼 생성
4가지 값을 이용해 페이지네이션을 DOM에 그려준다.
함수로 만들어서 페이지네이션 버튼을 만들어 줄 것이다.
출력할 상품 데이터의 인덱스 번호는 다음과 같은 조건으로 계산한다.
- 현재페이지 번호에서 한페이지에 보여줄 데이터 개수를 곱하면 그 다음 페이지 번호의 첫번째 데이터의 인덱스를 알 수 있음 -> 해당 인덱스보다 작아야 함
- 현재페이지 번호에서 1을 빼고 난 후 한페이지에 보여줄 데이터 개수를 곱하면 현재 페이지의 첫번째 데이터의 인덱스를 알 수 있음 -> 해당 인덱스보다 크거나 같아야 함
setPageBtn 함수
1) 4가지 값을 계산한다
2) 페이지네이션 넣어줄 요소를 document로 가져온다
3) 가져온 요소에 first부터 last까지 페이지번호 버튼을 삽입한다
3-1) 만약 nowPage와 같은 숫자라면 class로 active를 추가해준다(클래스 active의 css로 활성화되었다는 것을 표시함)
4) 각 숫자 버튼에 click 리스너를 추가한다
4-1) nowPage를 해당 페이지로 업데이트한다
4-2) 이전 숫자 버튼에는 active 클래스를 제거하고 현재 활성화된 숫자 버튼에는 active 클래스를 추가한다
4-3) 만약 현재 카테고리 타입이 'all'이라면 전체 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputMenu 함수)
4-4) 만약 나머지 타입이라면 type을 매개변수로 전달해 type에 해당하는 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputCateMenu 함수)
inputMenu 함수
1) 상품을 넣을 요소를 document로 가져온다
2) 전체 데이터를 돌면서 nowPageconCount보다는 작고, (nowPage-1)conCount보다는 크고 같은 인덱스에 해당하는 데이터들을 요소에 추가한다
inputCateMenu 함수
1) 상품을 넣을 요소를 document로 가져온다
2) filter를 이용해 카테고리 타입과 같은 타입을 가진 데이터들을 가져온다
3) 가져온 데이터를 돌면서 nowPageconCount보다는 작고, (nowPage-1)conCount보다는 크고 같은 인덱스에 해당하는 데이터들을 요소에 추가한다
3. 이전/이후 버튼
위의 그림과 같이 첫번째 페이지 그룹이면 이전 버튼이 없어야 하고
마지막 페이지 그룹이면 이후 버튼이 없어야 한다.
이전/이후 버튼은 동적으로 추가하는 것이 아니라 html에 넣어 이미 생성해놨기 때문에 특정 조건에서 숨기고 보이게 만들도록 하겠다.
또한, 이전/이후 버튼을 누르면 해당 그룹의 첫번째 숫자가 활성화되도록 한다.
3-1. 이전/이후 버튼 숨기기/보이기
setPageBtn 함수에 추가
1) 만약 totalPage가 last보다 작거나 같다면 그 다음 페이지는 없다는 뜻이기 때문에 해당 버튼의 요소를 가져와 숨긴다
2) 만약 totalPage가 last보다 크다면 해당 버튼의 요소를 가져와 보이게 한다
3) 만약 first가 1보다 작거나 같다면 이전 페이지는 없다는 뜻이기 때문에 해당 버튼의 요소를 가져와 숨긴다
4) 만약 first가 1보다 크다면 해당 버튼의 요소를 가져와 보이게 한다
3-2. 이전 버튼 기능 넣기
1) 이전 버튼의 요소를 가져와 click 리스너를 추가해준다
2) 만약 first - PAGE가 0보다 크다면 first - PAGE로 업데이트해준다
3) 이전 그룹의 숫자 버튼들을 생성하기 위해 setPageBtn 함수를 실행한다
4) 만약 type이 'all'이라면 전체 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputMenu 함수)
5) 만약 나머지 타입이라면 type을 매개변수로 전달해 type에 해당하는 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputCateMenu 함수)
3-3. 다음 버튼 기능 넣기
1) 다음 버튼의 요소를 가져와 click 리스너를 추가해준다
2) 만약 first + PAGE가 totalPage보다 작거나 같다면 nowPage를 first + PAGE로 업데이트해준다
3) 다음 그룹의 숫자 버튼들을 생성하기 위해 setPageBtn 함수를 실행한다
4) 만약 type이 'all'이라면 전체 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputMenu 함수)
5) 만약 나머지 타입이라면 type을 매개변수로 전달해 type에 해당하는 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputCateMenu 함수)
4. 맨 앞/맨 뒤 이동 버튼
데이터가 많아지면 맨 앞이나 맨 뒤로 페이지 이동시키는 것은 어려워진다.
이때 필요한 것이 맨 앞/맨 뒤로 이동하는 버튼이다.
이전/이후 버튼과 마찬가지로 첫번째 페이지 그룹이면 맨 앞 버튼을 없애고,
마지막 페이지 그룹이라면 맨 뒤 버튼을 없애겠다.
맨 앞/맨 뒤 버튼은 동적으로 추가하는 것이 아니라 html에 넣어 이미 생성해놨기 때문에 특정 조건에서 숨기고 보이게 만들도록 하겠다.
4-1. 맨 앞 버튼 기능 넣기
1) 맨앞 버튼의 요소를 가져와 click 리스너를 추가해준다
2) 맨앞으로 이동하니 nowPage=1로 업데이트해준다
3) 첫번째 그룹의 숫자 버튼들을 생성하기 위해 setPageBtn 함수를 실행한다
4) 만약 type이 'all'이라면 전체 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputMenu 함수)
5) 만약 나머지 타입이라면 type을 매개변수로 전달해 type에 해당하는 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputCateMenu 함수)
4-2. 맨 뒤 버튼 기능 넣기
1) 맨뒤 버튼의 요소를 가져와 click 리스너를 추가해준다
2) 맨뒤로 이동하니 nowPage=totalPage로 업데이트해준다
3) 마지막 그룹의 숫자 버튼들을 생성하기 위해 setPageBtn 함수를 실행한다
4) 만약 type이 'all'이라면 전체 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputMenu 함수)
5) 만약 나머지 타입이라면 type을 매개변수로 전달해 type에 해당하는 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputCateMenu 함수)
🌕최종 결과
📝참고자료
