이런 유형의 페이징은 어떤식으로 구현하나요??

Question

이런 페이지바 구현하려면 구글에 어떻게 검색해야 될까요..?

될때까지 · Answer

얼추 비슷하게 구현하긴 했는데, 원리 자체와 간단한 프로토타입 로직 자체는 단순한 것 같아요. 사용자가 선택한 페이지 인덱스를 중심으로 페이지가 1씩 증가 할 때 마다 양 옆으로 페이지 링크를 만들어주고, 특정 인덱스 범위를 벗어나는 지점의 양 옆으로 이클립스(...) 를 추가해주면 간단하게 구현할 수 있네요. 첫 번째 페이지 하고 마지막 페이지 부분은 하드 코딩된 상태로 두는데, 이대로 둔다면 사용자 입장에서는 자유로운 페이지 이동이 힘들기 때문에, 더 부가적인 로직이 필요할 것 같아요. 막상 구현해보면서 느낀건데, 이걸 실제 프로젝트에 사용하려면 더 복잡한 연산이 필요할 것 같은 느낌이 들어요. 구글에 페이지네이션 라이브러리 라고 한 번 검색해보세요(지금 보니 이상하게 동작하는 게 있네요. 참고만 해주세요..).HTML

CSS* { margin: 0; padding: 0; } body { width: 100%; height: 100vh; background: #14181c; } #pagination { margin-top: 2em; display: flex; justify-content: center; align-items: center; gap: 5px; } #pagination span, #pagination a { display: inline-block; padding: 5px 10px; text-decoration: none; color: #99aabc; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; } #pagination a { cursor: pointer; } #pagination a.active { background-color: #2c3239; color: #fff; } JSconst paginationContainer = document.getElementById("pagination"); const totalPages = 30; // 총 페이지 수 const currentPage = 1; // 현재 페이지 (동적으로 변경 가능) function createPagination(totalPages, currentPage) { paginationContainer.innerHTML = ""; // 첫 페이지 링크 if (currentPage > 4) { const firstPageLink = createPageLink(1, "1"); paginationContainer.appendChild(firstPageLink); } // 중간에 생략 기호 표시(왼쪽 이클립스) // (수정) 3 이었는데 4로 수정했어요. 사용자가 5 페이지에 들어오면 ... 이 생기도록 합니다. if (currentPage > 4) { const ellipsis = document.createElement("span"); ellipsis.textContent = "..."; paginationContainer.appendChild(ellipsis); } // 현재 페이지 주변에 페이지 링크 표시 (현재 페이지가 2 라면 1, 3 에 해당하는 페이지링크를 양 옆에 생성) for ( let i = Math.max(1, currentPage - 3); i <= Math.min(totalPages, currentPage + 3); i++ ) { const pageLink = createPageLink(i, i); if (i === currentPage) { pageLink.classList.add("active"); } paginationContainer.appendChild(pageLink); } // 중간에 생략 기호 표시 (오른쪽 이클립스) if (currentPage < totalPages - 4) { const ellipsis = document.createElement("span"); ellipsis.textContent = "..."; paginationContainer.appendChild(ellipsis); } // 마지막 페이지 링크 if (currentPage < totalPages-3) { const lastPageLink = createPageLink(totalPages, totalPages); paginationContainer.appendChild(lastPageLink); } } function createPageLink(page, text) { const link = document.createElement("a"); link.textContent = text; link.href = "#"; link.addEventListener("click", (event) => { event.preventDefault(); createPagination(totalPages, page); }); return link; } createPagination(totalPages, currentPage);

이런 유형의 페이징은 어떤식으로 구현하나요??

1개의 답변

Q&A 목록