자바스크립트에서 JSON 데이터를 이용하여 페이징 기능 생성하기

15 Sep 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 JSON 데이터를 이용한 페이징 기능을 만들어보겠습니다. 페이징 기능은 대량의 데이터를 사용자에게 더 나은 경험을 제공하기 위해 데이터를 페이지별로 나누는 기능입니다.

JSON 데이터 가져오기

우선 JSON 데이터를 가져와야 합니다. 이를 위해 XMLHttpRequest 객체를 사용하여 서버에서 JSON 데이터를 비동기적으로 가져옵니다. 다음은 예제 코드입니다.

const url = '데이터를 가져올 URL';

const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const jsonData = JSON.parse(xhr.responseText);
        // 데이터를 처리하고 페이징 기능을 생성하는 함수 호출
        createPagination(jsonData);
    }
};
xhr.send();

위 코드에서는 url에 데이터를 가져올 URL을 설정하고, XMLHttpRequest 객체를 생성한 뒤 open 메소드를 사용하여 GET 요청을 설정합니다. 그리고 onreadystatechange 이벤트 핸들러를 등록하여 요청의 상태 변화를 감지하고, 요청이 완료되면 responseText를 파싱하여 JSON 데이터를 가져옵니다.

페이징 기능 생성하기

JSON 데이터를 가지고 있는 경우, 페이징 기능을 추가하여 사용자가 데이터를 페이지별로 볼 수 있도록 만들 수 있습니다. 페이징을 생성하는 함수는 다음과 같습니다.

function createPagination(data) {
    const itemsPerPage = 10; // 한 페이지에 보여질 아이템 개수
    const totalPages = Math.ceil(data.length / itemsPerPage); // 총 페이지 수

    // 페이징 버튼 생성
    const paginationContainer = document.getElementById('pagination');
    for (let i = 1; i <= totalPages; i++) {
        const pageNum = i;
        const pageButton = document.createElement('button');
        pageButton.innerText = pageNum;
        pageButton.addEventListener('click', function() {
            showPage(data, pageNum, itemsPerPage);
        });
        paginationContainer.appendChild(pageButton);
    }

    // 초기 페이지 표시
    const initialPage = 1;
    showPage(data, initialPage, itemsPerPage);
}

function showPage(data, pageNum, itemsPerPage) {
    const startIndex = (pageNum - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const pageData = data.slice(startIndex, endIndex);

    // 표시할 데이터를 사용하여 필요한 동작 수행 (예: 테이블 생성, 리스트 렌더링 등)
    // ...
}

위 코드에서는 itemsPerPage 변수를 설정하여 한 페이지에 보여질 아이템 개수를 지정합니다. 그리고 totalPages 변수를 사용하여 총 페이지 수를 계산합니다. 페이징 버튼은 pagination이라는 아이디를 가진 컨테이너에 추가됩니다. 각 버튼은 페이지 번호에 대한 클릭 이벤트를 가지며, 클릭 시 해당 페이지의 데이터를 보여주는 showPage 함수가 호출됩니다.

showPage 함수는 페이지 번호와 아이템 개수를 받아 해당 페이지에 보여질 데이터를 계산하고, 이를 사용하여 필요한 동작을 수행합니다. 예를 들어, 테이블 생성 또는 리스트 렌더링과 같은 동작을 수행할 수 있습니다.

마무리

위의 예제 코드를 사용하면 JSON 데이터를 페이징 기능과 연동하여 페이지별로 보여줄 수 있습니다. 데이터 양에 상관없이 사용자가 더 편리하게 데이터를 탐색할 수 있도록 페이징 기능을 추가해보세요.

#pagination #자바스크립트 #JSON #페이징 #WebDevelopment