jQuery, Java Script로 페이지네이션(pagination) 구현하기 - 코드 포함

 

1. 구현 코드

이 코드는 페이지네이션을 설정하는 `setupPagination` 함수와 관련 기능을 구현한 코드입니다. 

다음은 각 부분의 설명입니다:

1. `setupPagination` 함수:
   - `rowsPerPage`: 한 페이지에 보여줄 항목 수를 나타내는 변수입니다.
   - `rows`: 페이지네이션을 적용할 항목들의 배열입니다.
   - `rowsCount`: 항목의 총 개수를 나타내는 변수입니다.
   - `pageCount`: 전체 페이지 수를 나타내는 변수입니다.
   - `numbers`: 페이지 번호를 표시하는 요소(예: 숫자 목록)를 나타내는 변수입니다.
   - `prevPageBtn`, `nextPageBtn`: 이전 페이지 및 다음 페이지로 이동하는 버튼을 나타내는 변수입니다.
   - `pageActiveIdx`: 현재 페이지 그룹의 번호를 나타내는 변수입니다.
   - `currentPage`: 현재 보고 있는 페이지의 번호를 나타내는 변수입니다.
   - `maxPageNum`: 페이지 그룹의 최대 개수를 나타내는 변수입니다.

2. 페이지 번호 생성:
   - `numbers` 요소에 `pageCount` 만큼의 페이지 번호를 생성하여 추가합니다.
   - 생성된 페이지 번호는 클릭 이벤트에 응답하기 위해 `numbersBtn` 변수에 할당됩니다.

3. 페이지네이션 번호 숨기기:
   - `numbersBtn` 배열을 순회하며 각 페이지 번호를 숨깁니다.

4. 페이지 번호 클릭 이벤트:
   - `numbersBtn`의 각 요소에 클릭 이벤트 리스너를 추가합니다.
   - 클릭 시 `displayRow` 함수를 호출하여 해당 페이지의 항목을 표시합니다.

5. `displayRow` 함수:
   - 페이지 번호에 해당하는 항목을 표시하고 나머지 항목은 숨깁니다.
   - `start`와 `end` 변수를 사용하여 보여줄 항목의 범위를 계산합니다.
   - `rowsArray` 배열을 순회하며 각 항목의 표시 여부를 결정합니다.
   - 선택된 페이지 번호의 버튼에 `active` 클래스를 추가합니다.

6. 페이지 그룹 표시 함수 (`displayPage`):
   - 페이지 번호를 해당 페이지 그룹에 맞게 표시하고 나머지는 숨깁니다.
   - `totalPageCount` 변수를 사용하여 전체 페이지 그룹 수를 계산합니다.
   - `pageArr` 배열을 순회하며 각 페이지 번호의 표시 여부를 결정합니다.
   - 현재 페이지 그룹의 인덱스에 따라 이전 페이지 및 다음 페이지 버튼의 표시 여부를 결정합니다.

7. 다음 페이지 및 이전 페이지 버튼 클릭 이벤트:
   - `nextPageBtn` 및 `prevPageBtn`에 클릭 이벤트 리스너를 추가합니다.

$(document).ready(function() {
  setupPagination();
});

function setupPagination(){
const rowsPerPage = 12;
const rows = document.querySelectorAll('.product-list li');
const rowsCount = rows.length;
const pageCount = Math.ceil(rowsCount / rowsPerPage);
const numbers = document.querySelector('#numbers');
const prevPageBtn = document.querySelector('.pagination .fa-arrow-left');
const nextPageBtn = document.querySelector('.pagination .fa-arrow-right');
let pageActiveIdx =0; //현재 페이지 그룹의 번호
let currentPage = 0;  //현재 보고있는 페이제네이션 번호
let maxPageNum =3; //페이지그룹 최대 개수

console.log("rowsCount",rowsCount);
console.log("rowsCount",pageCount);

for (let i = 1; i <= pageCount; i++) {

    numbers.innerHTML += `<li><a href="">${i}</a></li>`;
}

//페이지네이션 클릭
const numbersBtn = numbers.querySelectorAll('a');


//페이지네이션 번호 감추기
for(nb of numbersBtn){
    nb.style.display = 'none';
}


numbersBtn.forEach((item, idx)=>{
    item.addEventListener('click',(e)=>{
        e.preventDefault() // 기본기능 막기

         displayRow(idx)
    })

})

function displayRow(idx) {

    let start = idx * rowsPerPage;
    let end = start + rowsPerPage;
    let rowsArray = [...rows];


    //let rowsArray = Array.from(rows);
    for(ra of rowsArray) {
        //안보이게 하기
        ra.style.display = 'none';
    }

    let newRows =rowsArray.slice(start, end);
    for(nr of newRows) {
        nr.style.display = '';
    }

    //css 조정
    for(nb of numbersBtn){
        nb.classList.remove('active');
    }
    numbersBtn[idx].classList.add('active');

    //console.log("idx::",idx);

}//displayRow

//페이지 랜더링시 페이지네이션 바로 적용
displayRow(0);

//페이지네이션 그룹 표시 함수
function displayPage(num) {
    //페이지네이션 번호 감추기
    for(nb of numbersBtn){
        nb.style.display = 'none';
    }

    let totalPageCount = Math.ceil(pageCount / maxPageNum);
    let pageArr = [...numbersBtn];
    let start =num*maxPageNum;
    let end = start + maxPageNum;
    let pageListArr = pageArr.slice(start, end);

    for(pa of pageListArr) {
        pa.style.display = 'block';
    }

    //첫페이지에 화살표 안보이게하기
    if(pageActiveIdx == 0){
        prevPageBtn.style.display = 'none';
    }else{
        prevPageBtn.style.display = 'block';
    }

    if(pageActiveIdx == totalPageCount-1){
        nextPageBtn.style.display = 'none';
    }else{
        nextPageBtn.style.display = 'block';
    }

}

displayPage(0);

nextPageBtn.addEventListener('click', ()=>{ 
    let nextPageNum = pageActiveIdx*maxPageNum+maxPageNum;
    displayRow(nextPageNum);
    ++pageActiveIdx;
    displayPage(pageActiveIdx);

});

prevPageBtn.addEventListener('click', ()=>{

    let prevPageNum = pageActiveIdx*maxPageNum-maxPageNum;
    displayRow(prevPageNum);
    --pageActiveIdx;
    displayPage(pageActiveIdx);
});

}
//-----------pagination End----------------------------------------

 

 

 

2. 실제 구현된 모습