19일차! (나만의 아고라 스테이츠 만들기 중 페이지네이션)

어제와 오늘 개인프로젝트를 과제로 내주셨다. 값이 객체로 된 배열을 이용하여 질문하는 페이지를 만드는 것이었는데 생각보다 쉽지 않았다. 한 개의 난관을 5시간이나 생각했던것 같다. 하면서 로컬스토리지에 저장하는것도 배웠는데 페이지네이션이 정말 이해가 안갔다. 찾아보고 손으로 직접 쳐가며 해봤지만 이해가 안갔다. 블로그에 다시 정리하면서 이해해보려고 한다!

 

페이지네이션...

1. HTML로 틀 만들기

<nav class="pagenation__container">
  <button class="pagenation__button" id="pre__button" title="Previous page" aria-label="Previous page">&lt;</button>
  <div id="pagenation__numbers"></div>
  <button class="pagenation__button" id="next__button" title="Next page" aria-label="Next page">&gt;</button>
</nav>

페이지를 나타내는 숫자를 가장 아래 나타내기 위해 main태그 안 마지막에 태그를 추가했다. button 태그들은 누르면 페이지가 업되거나 다운되는 버튼으로 사용하고 div태그 안에 페이지 번호를 나열하려고 한다. 

 

2. div 태그 안에 나열할 button 만드는 함수 만들기

const pageNum = document.querySelector('#pagenation__numbers'); // 새로만든 버튼을 넣어줄 div태그
const listItem = document.querySelectorAll('li'); // 배열의 값을 나열한 태그들
const nextB = document.querySelector('#next__button'); // 다음 페이지 버튼 
const preB = document.querySelector("#pre__button"); // 이전 페이지 버튼

const pageLimit = 10; //페이지에 나타낼 디스커션의 갯수
const pageCount = Math.ceil(listItem.length/pageLimit) //페이지 갯수
let currentPage; //page 값 저장

// 페이지 버튼 생성 
const appendPagrNumber = (index) => {
  const pageNumber = document.createElement('button');
  pageNumber.className = 'pagenation__number';
  pageNumber.textContent = index;
  pageNumber.setAttribute('page__index', index);
  pageNumber.setAttribute('aria-label', 'page'+index);

  pageNum.append(pageNumber);
}

// 페이지 버튼 index
const getPageNum = () => {
  for(let i = 1; i<=pageCount; i++) {
    appendPagrNumber(i);
  }
}

필요한 요소들을 DOM을 이용하여 불러오고 사용할 값들을 선언해준다.  appendPagrNumber 함수를 돌리는데 버튼이라는 요소를 만들고 class이름을 붙이고 html의 id가 pagenation__numbers인 div 태그 안에 넣어준다. appendPagrNumber의 index는 아래 getPageNum의 함수를 통해 만들어 준다.

 

3. 페이지가 로드될때 함수를 실행하기위해 addEventListener 만들기

window.addEventListener('load', ()=>{
  getPageNum();
  })

위에 만든 함수를 페이지가 로드할때 실행시키기 위해 addEventListener를 만들어 준다.

 

4.  페이지에 원하는 갯수 빼고 숨기기 

// 페이지에 디스커션 표시 
const setCurrentPage = (pageNum) => {
  currentPage = pageNum;

  const preRange = (pageNum-1)*pageLimit;
  const currRange = pageNum*pageLimit;

  listItem.forEach((item, index) => {
    item.classList.add('hide');
    if(index>=preRange && index<currRange) {
      item.classList.remove('hide');
    }
  })
}

//3번에서 만든 함수
window.addEventListener('load', ()=>{

  getPageNum();
  setCurrentPage(1);
  
  document.querySelectorAll('.pagenation__number').forEach((button) => {
    const pageIndex = Number(button.getAttribute('page__index'));

    if(pageIndex) {
      button.addEventListener('click', () => {
        setCurrentPage(pageIndex);
      })
    }
  })
})

디스커션의 표시할 요소를 정하는 setCurrentPage 함수를 생성한다. 파라미터인 pageNum을 2번에서 선언한 currentPage에 할당하고 나타낼 첫번째 요소와 마지막요소를 정할 변수를 선언및 할당해준다. 그리고 2번에서 선언해준 listItem에 반복문을 돌려 class에 hide를 전부 넣어주고 만약 위에서 정한 요소의 범위에 속하지 않는다면 class에 hide를 추가해준다.

 

3번에서 만든 addEventListener 안에서 setCurrentPage 함수의 초기파라미터 값은 1로 정해둔다. div 안에 넣어준 숫자 버튼들의 값을 불러와서 pageIndex에 저장하고 pageIndex가 참일 경우 버튼을 click하게 되면 pageIndex를 파라미터로 하는 setCurrentPage 함수를 호출한다. 

 

5. 버튼들의 class에 active추가하기

const handleActivePageNumber = () => {
  document.querySelectorAll('.pagenation__number').forEach((button) => {
    button.classList.remove('active');

    const pageIndex = Number(button.getAttribute('page__index'));
    if(pageIndex == currentPage) {
      button.classList.add('active');
    }
  })
}

//4번에서 만든 함수 
const setCurrentPage = (pageNum) => {
  currentPage = pageNum;

  handleActivePageNumber();

  const preRange = (pageNum-1)*pageLimit;
  const currRange = pageNum*pageLimit;

  listItem.forEach((item, index) => {
    item.classList.add('hide');
    if(index>=preRange && index<currRange) {
      item.classList.remove('hide');
    }
  })
}

페이지네이션 버튼을 눌렀을때 active라는 class를 추가하기 위해 모든 버튼에서 active라는 class를 지운후 pageIndex와 currentPage가 같을때만 active를 class에 추가한다. 그리고 4번에서 만들어준 함수에 포함시킨다.

 

6.  다음페이지 버튼과 이전페이지 버튼의 활성화와 비활성화

const disable = (button) => {
  button.classList.add('disabled');
  button.setAttribute('disabled', true);
}
const able = (button) => {
  button.classList.remove('disabled');
  button.removeAttribute('disabled');
}

const handlePageButtonsStatus = () => {
  if (currentPage === 1) {
    disable(preB);
  } else {
    able(preB);
  }
 
  if (pageCount === currentPage) {
    disable(nextB);
  } else {
    able(nextB);
  }
};

//4번에서 만든 함수 
const setCurrentPage = (pageNum) => {
  currentPage = pageNum;

  handleActivePageNumber();
  handlePageButtonsStatus();

  const preRange = (pageNum-1)*pageLimit;
  const currRange = pageNum*pageLimit;

  listItem.forEach((item, index) => {
    item.classList.add('hide');
    if(index>=preRange && index<currRange) {
      item.classList.remove('hide');
    }
  })
}

//3번에서 만든 함수
window.addEventListener('load', ()=>{

  getPageNum();
  setCurrentPage(1);

  preB.addEventListener('click', () => {
    setCurrentPage(currentPage - 1);
  })

  nextB.addEventListener('click', () => {
    setCurrentPage(currentPage + 1);
  })

  document.querySelectorAll('.pagenation__number').forEach((button) => {
    const pageIndex = Number(button.getAttribute('page__index'));

    if(pageIndex) {
      button.addEventListener('click', () => {
        setCurrentPage(pageIndex);
      })
    }
  })
})

버튼의 비활성화하고 활성화하는 함수를 만들어주고 현재 페이지가 1이라면 이전 페이지는 비활성화 현재페이지가 마지막 페이지라면 다음페이지는 비활성화 하게 한다. 그리고 4번에서 만든 함수에 포함시킨다.

3번에서 만든 함수에 이전버튼을 누를 경우 페이지가 -1되게 다음버튼을 누를 경우 페이지가 +1이 되게 넣어준다. 

 

이렇게 하면 페이지네이션이 완성이 된다. 아직 안보고 해보라면 못하겠지만 어느정도 흘러가는 느낌은 안것 같다는 생각이다. 몇번이고 와서 복습해야겠다.