[JS] 최근본상품리스트의 현재페이지번호/전체요소갯수 구하는 방법

금번 개인 프로젝트를 준비하며 정리해두면 이후에도 좋을 것 같은 현재페이지번호/전체요소갯수 구하는 방법!

/(슬래시) 기호를 기준으로 왼쪽에 있는 숫자는 현재 페이지번호이고,

오른쪽에 있는 숫자는 리스트 안에 들어있는 전체요소갯수다.

먼저 코드 공유를 먼저 하자면, 내 경우는 아래와 같은 방식으로 진행했다. 

const totNum = document.querySelector(".total-page-num");
const cNum = document.querySelector(".current-page-num");
const proItem = document.querySelectorAll(".recent-view-prod-list > ul > li");
const arr = [];

proItem.forEach((ele)=>arr.push(proItem));
const arrLength = arr.length;
totNum.innerText = arrLength;
// 현재 페이지를 구하는 코드
const pageSize = 4; // 한 페이지에 보여줄 상품 개수
const currentPg = Math.ceil(arrLength / pageSize);
cNum.innerText = currentPg;

 

1. Total number 구하기

대상요소로 total num이 들어갈 요소,  current page num이 들어갈 요소, 리스트에 추가되는 li 요소를 잡았다.

그런다음 li 전체를 for문으로 순회시킨다음 배열 안에 넣었고,

이 배열의 길이를 구한 값을 total num 요소의 innerText로 넣었다.  (그랬더니 위와 같은 총갯수 4가 찍혔다.)

proItem.forEach((ele)=>arr.push(proItem));

const arrLength = arr.length;

totNum.innerText = arrLength;

 

2. Current page number 구하기 (Ver1. 버튼클릭시 페이지번호 업데이트)

그리고 마지막으로 현재 페이지번호를 구하기 위해 내가 사용한 방법은 아래와 같다.

const totNum = document.querySelector(".total-page-num");
const cNum = document.querySelector(".current-page-num");
const proItem = document.querySelectorAll(".recent-view-prod-list > ul > li");
const arr = [];

proItem.forEach((ele)=>arr.push(proItem));
const arrLength = arr.length;
totNum.innerText = arrLength;

// 현재 페이지를 구하는 코드(1) - 버튼클릭시 페이지번호 업데이트
let currentPage = 1;

document.querySelector(".next").addEventListener("click",()=>{
    if(currentPage < arrLength) // 배열값 이하일때만 증가 처리
    currentPage++;
    cNum.innerText = currentPage;
});

document.querySelector(".prev").addEventListener("click",()=>{
    if(currentPage > 1) // 페이지 번호가 1보다 크면 감소 처리
    currentPage--;
    cNum.innerText = currentPage;
});

내 경우는 상단 최근본상품리스트 이미지에서 볼 수 있듯이,

다음버튼 클릭시에 현재페이지번호가 1씩증가, 이전버튼 클릭시에 현재페이지번호가 1씩 감소되도록 해야했다.

그러기위해 현재페이지번호 초기값을 셋팅해둬야한다. 이 값을 기준으로 버튼클릭시 증감해야하므로.

let currentPage = 1;

다음 버튼을 클릭했을 때, 전체요소갯수는 4인데 갯수이상으로 무한정 클릭이 되면 안될 것이다.

고로 아까 위에서 구한 배열값 이하일때만 증가처리되도록 이벤트구역 안에 조건을 걸어둬야한다.

document.querySelector(".next").addEventListener("click",()=>{

    if(currentPage < arrLength) // 배열값 이하일때만 증가 처리

    currentPage++;

    cNum.innerText = currentPage;

});

그러면 4 이하 숫자로만 돌것이다 : )

이전 버튼을 클릭했을 때는, 1이하의 숫자(0, 음수)가 나올때까지 계속 클릭되면 안될 것이다.

이것 또한 현재페이지번호가 1이상일때만 감소되도록 별도의 조건을 걸어둬야한다.

document.querySelector(".prev").addEventListener("click",()=>{

    if(currentPage > 1) // 페이지 번호가 1보다 크면 감소 처리

    currentPage--;

    cNum.innerText = currentPage;

});

이렇게 하면 앞서 셋팅해둔 페이지번호 기본셋팅값인 1 이상의 수일때만 이전버튼 클릭시 페이지번호가 감소될 것이므로,

1이하의 숫자가 나오는 것을 방지할 수 있다.

위는 최종 결과 화면이다.

보시다시피 1~전체요소갯수 바운더리 안에서만 숫자가 증감하는 것을 확인할 수 있다!

 

+ 보너스 

2-1. Current page number 구하기 (Ver2. 버튼클릭없이 페이지번호 업데이트)

만약 버튼 클릭시에 현재페이지번호를 ++(증가)/--(감소) 시켜야하는 경우가 아니라,

한 페이지 내에서 그냥 현재페이지번호를 업데이트해서 보여줘야하는 경우라면 아래와 같은 방법도 있겠다.

const totNum = document.querySelector(".total-page-num");
const cNum = document.querySelector(".current-page-num");
const proItem = document.querySelectorAll(".recent-view-prod-list > ul > li");
const arr = [];

proItem.forEach((ele)=>arr.push(proItem));
const arrLength = arr.length;
totNum.innerText = arrLength;
// 현재 페이지를 구하는 코드(2) - 버튼클릭없이 페이지번호 업데이트
const pageSize = 4; // 한 페이지에 보여줄 상품 개수
const currentPg = Math.ceil(arrLength / pageSize);
cNum.innerText = currentPg;

먼저 한 페이지에 내가 보여주고자하는 요소갯수를 고정값으로 정했다.

내 경우는 li요소 전체를 감싸는 부모박스 길이를 감안하여 4로 잡았다.

const pageSize = 4;

전체요소갯수를 위에서 구했으니 현재페이지번호는 쉽게 구할 수 있다!

Math.ceil 함수를 사용해 전체상품갯수를 한 페이지에 보여줄 상품갯수로 나눈뒤 올림한 값을 변수에 할당한다.

그리고 current page num 요소의 innerText로 해당 값을 출력시키면 끝이다.

const currentPg = Math.ceil(arrLength / pageSize);

cNum.innerText = currentPg;

위 식으로 작업하면 아래와 같이 전체요소갯수가 변동되는 사정에 따라 내가 현재 보고있는 페이지번호를 변경할 수 있다.

Ex)

전체요소갯수(4) / 한페이지에 보여줄상품갯수(4) = 1

전체요소갯수(14) / 한페이지에 보여줄상품갯수(4) =  3.5 // 소수점제거를 위해 Math.ceil 함수를 이용한 것이다.

 

3. 요소 삭제버튼 클릭시 전체요소갯수값 감소된 값으로 갱신

전체요소갯수 삭제버튼 클릭했을때 클릭한 요소의 상위요소인 li태그를 삭제하도록 코드를 짰다.

그런데 삭제버튼 'X' 클릭시에 위에서 구해준 전체요소값이 갱신되지 않는 모습을 살펴볼 수 있다.

요소를 삭제했을때 배열에 담긴 요소갯수도 그만큼 감소되도록 식을 추가로 짜줬다.

그리고 감소된 값으로 다시 갱신해주니 그에 맞춰 업데이트된 모습을 확인할 수 있었다.

위에서 선언해준 arrLength 값이 재할당되어야하므로 const 키워드를 let 으로 변경해주었다.

// 삭제버튼에 이벤트핸들러 등록
delItem.forEach((ele)=>{
    ele.addEventListener("click",removeItem);
})

function removeItem(){
    const listItem = this.parentNode;
    // console.log(listItem); // LI 
    listItem.parentNode.removeChild(listItem); 

    arrLength--; // 전체요소갯수 감소
    totNum.innerText = arrLength; // 감소된 값으로 갱신
}

그리고 이에 대한 결과는 아래과 같다.

코딩은 참 끝날때까지 끝난 게 아닌거 같다..!