TIL 23.01.10

오늘은 아고라 스테이츠에 간단한 기능을 추가하였다.

 

글의 목록을 지정한 개수로 나누어서

나눠진 글의 개수를 볼 수 있게 만드는 pagination  기능을 구현해보았다.

//Pagination
const paginationContianer = document.querySelector(".page_list");

//8개씩 출력
let totalPage = Math.ceil(agoraStatesDiscussions.length / 8);
let currentPage = 1;

function setPage(totalPage, currentPage) {
  let li = "";
  let prevPage = currentPage - 2;
  let nextPage = currentPage + 2;

  //현재 페이지 위치에 따라
  //보여지는 페이지 조정
  if (currentPage === 1) {
    nextPage += 2;
  }
  if (currentPage === 2) {
    nextPage += 1;
  }
  if (currentPage === totalPage) {
    prevPage -= 2;
  }
  if (currentPage === totalPage - 1) {
    prevPage -= 1;
  }
  // '<'을 누르면 이전 페이지로 이동 가능하게 구현
  if (currentPage > 1) {
    li += `<li class="prev__page" onClick=setPage(${totalPage},${
      currentPage - 1
    })><</li>`;
  }

  //페이지의 num을 설정

  for (let i = prevPage; i <= nextPage; i++) {
    if (i >= 1 && i <= totalPage) {
      //선택해주기
      if (i === currentPage) {
        li += `<li class="page_num select_li">${i}</li>`;
      } else {
        li += `<li class="page_num">${i}</li>`;
      }
    }
  }

  // '>'을 누르면 이후 페이지로 이동 가능하게 구현
  if (currentPage < totalPage) {
    li += `<li class="next__page" onClick=setPage(${totalPage},${
      currentPage + 1
    })>></li>`;
  }
  paginationContianer.innerHTML = li;

  ul.innerHTML = "";
  render(ul, (currentPage - 1) * 8);
}

setPage(totalPage, currentPage);

 

 < 1 2 3 4 5 >

같은 형태로 구현을 위해서 

크게 < / 1 2 3 4 5 / > 

세 부분으로 나누어 제작하였다.

 

글의 페이지가 5개 이상 존재하면 글의 페이지를 5개 보여지게 구현하기를 원했다.

따라서 현재 페이지에 따라서 보여지는 페이지를 5개로 조정하느라 많은 시도를 하였다.

 

결과적으로 첫번째, 두번째, 맨 뒤, 맨뒤의 앞 페이지를 예외처리를 해주어야했고,

prevPage, nextPage를 조정하면서 해당 조건에서도 5개가 보이도록 구현하였다.

 

6번째 페이지에서도 5개의 페이지 번호가 보인다

이외에도 localstorage를 이용해서 새로고침을 하여도

작성한 글이 페이지에 유지가 되고, 답변도 모달형태로 띄울수 있게 고치기를 원했는데

 

pagination 구현에만 시간을 쏟아서 간단하게 css만 수정하고 제출을 하였다.

 

아쉬움이 많이 남는 프로젝트였지만, 틈틈히 수정하고 부족한 기능을 매꾸어 나가야겠다!

 

 

 

-끝-