Vanilla JavaScript의 페이지 매김

개요

웹사이트나 웹 애플리케이션을 만들 때, 특히 많은 기능을 갖춘 경우 템플릿 콘텐츠(예: 카테고리에 속한 항목의 그리드 또는 목록) – 일반적으로 페이지로 나누기 한 번에 화면에 표시되는 항목의 수를 줄입니다.

이 기사에서는 처음부터 기본 JavaScript를 사용하여 웹 프로젝트에서 페이지 매김을 구현하는 방법을 배웁니다.

이 문서의 목적을 위해 다음에서 콘텐츠를 가져옵니다. 이 예제 API 응답. 여기에는 100개의 데이터 포인트가 포함되어 있지만 30개만 사용하고 한 번에 화면에 6개의 게시물을 표시합니다.

시작 가이드

브라우저에 내장된 Fetch API를 사용하여 API에서 필요한 모든 게시물을 가져오기 전에 먼저 나중에 스크립트를 통해 동적으로 채워질 기본 HTML 마크업을 만들어야 합니다.

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

REST API 게시물 가져오기

앞에서 언급했듯이 페이지 매김은 콘텐츠를 더 작은 덩어리로 나누는 것입니다. 데이터를 가져오고 분할 시기와 방법을 결정하고 페이지 수를 계산한 다음 그 일부를 사용자에게 보여줘야 합니다. 고맙게도 백엔드 기능은 일반적으로 처음 몇 가지 작업을 처리하고 관련 페이지, 총 페이지 수 및 콘텐츠를 반환합니다. 페이지 당.

먼저 모든 게시물을 가져온 다음 나중에 페이지당 몇 개의 데이터 포인트만 쿼리하도록 수정하겠습니다.

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

위의 코드를 빠르게 살펴보겠습니다. 우선, 우리는 div 를 통해 모든 콘텐츠를 표시할 요소 class 우리가 지정한 이름 div. 마지막으로 가져오기 작업을 처리하는 함수를 작성했습니다.

. fetchPosts() 기능, 우리는 API 가져 오기 에서 게시물을 검색하려면 JSON 자리 표시자 게시물 API에서 참조하는 JSON 데이터를 저장합니다. posts 변수와 사용 innerHTML 속성에 각 콘텐츠를 추가하려면 posts-section 그것들을 반복함으로써.

이 시점에서 모든 콘텐츠를 성공적으로 가져왔습니다.

웹 페이지 내에서 페이지 매김을 구현하는 데 중요한 세 가지 변수를 선언하는 것으로 시작하겠습니다. 첫 번째는 페이지당 선언하려는 게시물 수, 그 다음에 현재 페이지 번호 (1 기본적으로) 및 총 페이지 수.

이 가이드를 위해 우리는 총 페이지 수 고정된 수 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

이전 섹션에서는 단일 페이지에 모든 게시물을 표시했지만 한 번에 XNUMX개만 표시하려고 합니다. 따라서 우리는 numberPerPage 에 6 이제 가져오기 작업을 조정하는 데 사용할 것입니다. 6 게시물.

특정 구현에 따라 다르지만 API에서 결과를 가져올 때 쿼리 매개변수를 사용하도록 허용하는 것이 널리 퍼져 있습니다. 페이지 결과의. 예를 들어 우리가 사용하고 있는 모의 REST API는 다음을 허용합니다. page 및 limit 지정된 시간에 표시할 배치만 로드할 수 있는 매개변수입니다.

이렇게 하면 사용자에게 보여주고 싶은 데이터만 로드합니다! 그런 다음 로드 시간을 단축하기 위해 다음 페이지를 미리 가져오거나 표시할 데이터만 로드하여 계산 속도를 높일 수 있습니다.

가져오기 요청을 수정하여 이러한 매개변수를 사용할 것입니다.

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

위의 코드에서 API 엔드포인트에 두 개의 매개변수를 추가했습니다. pageNumber 그리고 페이지당 게시물 수 이렇게 하면 게시물을 여러 페이지로 나눌 수 있으며 이러한 게시물은 이제 페이지 번호를 기반으로 표시될 수 있습니다.

또한 우리는 pageNumber ~로 fetchPosts() 함수를 사용하여 페이지가 변경될 때마다 이 함수를 호출할 수 있습니다.

이제 페이지 하단에 있는 페이지 탐색 버튼에 기능을 추가하고 페이지 번호에 따라 적절한 콘텐츠를 표시하도록 합시다.

마크업에서 페이지 매김 버튼을 표시하는 섹션이 있음을 알 수 있습니다.

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

이제 추가하겠습니다. click 버튼을 클릭하면 해당 페이지에 대한 콘텐츠가 표시되도록 각 버튼에 대한 이벤트.

구현 이전 보기 단추

여기의 논리는 매우 간단합니다. 우리가 해야 할 일은 다음을 나타내는 요소를 검색하는 것입니다. 이전 버튼추가 click 이벤트 리스너를 호출하고 버튼을 클릭하면 적절한 콘텐츠를 표시합니다.

const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

추가 후 click 이벤트 리스너에서 현재 페이지 번호가 다음보다 큰지 확인했습니다. 1 콜백 기능에서. 숫자가 같거나 작은 경우 1, 현재 콘텐츠를 계속 표시합니다. 그러나 현재 페이지 번호가 다음보다 큰 경우 1 우리는 그 값을 자유롭게 감소시키고 fetchPosts(pageNumber) 함수에 새 페이지 번호가 인수로 전달되어 이전 페이지의 내용이 표시됩니다.

구현 다음 보기 단추

여기서 논리는 다음과 완전히 동일합니다. 너무 이른 몇 가지 사소한 변경 사항이 있는 버튼입니다. 물론 클래스를 사용하여 목록 요소를 검색합니다. next 대신 prev. 또한 현재 페이지 번호가 페이지 수 우리가 설정한 30 더 일찍 수동으로. 결국 현재 페이지 번호를 줄이는 대신 증가시킵니다.

const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});

결론

웹 애플리케이션에 데이터베이스 또는 기타 데이터 소스를 표시하려고 할 때마다 콘텐츠를 더 작고 관리하기 쉬운 청크로 분할하여 개별적으로 표시하는 것이 중요합니다.

이 기사에서는 외부 라이브러리 및 도구 없이 처음부터 JavaScript로 페이지 매김을 구현하는 방법을 살펴보았습니다.

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 출처: https://stackabuse.com/pagination-in-vanilla-javascript/