웹 애플리케이션에서 많은 양의 데이터를 표시해야 할 경우, 페이징은 사용자 경험을 향상시키는 중요한 기능입니다. 이번 글에서는 jQuery를 사용하여 간단한 페이징 처리 방법을 알아보겠습니다.
페이지 구조
먼저, HTML 마크업을 구성해야 합니다. 예를 들어, 콘텐츠를 보여줄 div 요소와 페이지 번호를 표시할 ul 요소가 있다고 가정해보겠습니다.
<div id="content-container">
<!-- 콘텐츠 내용 -->
</div>
<ul id="pagination">
<!-- 페이지 번호 -->
</ul>
페이징 처리 함수
다음으로, 페이징을 처리하기 위한 JavaScript 함수를 작성해야 합니다. jQuery를 사용하여 페이지 번호를 클릭하면 해당 페이지의 콘텐츠를 요청하고, 받아온 콘텐츠를 content-container에 업데이트하는 방식으로 구현할 수 있습니다. 또한, 클릭한 페이지 번호에 active 클래스를 추가하여 현재 페이지를 시각적으로 표시할 수 있습니다.
function handlePageClick(pageNumber) {
// 페이지 번호 클릭 이벤트 처리 로직
$.ajax({
url: '/path/to/api', // 페이지 데이터를 받아올 API 경로
method: 'GET',
data: {
page: pageNumber
},
success: function(response) {
// 콘텐츠를 받아와서 업데이트
$('#content-container').html(response);
// 현재 페이지 번호 표시를 업데이트
$('#pagination li').removeClass('active');
$('#pagination li[data-page="' + pageNumber + '"]').addClass('active');
}
});
}
페이지 번호 생성
마지막으로, 페이지 번호를 동적으로 생성하는 함수를 작성해야 합니다. 이 함수는 API를 통해 전체 페이지 수를 받아와서 pagination 요소에 <li> 요소를 추가합니다. 이 때, 각 페이지 번호를 클릭할 때 handlePageClick 함수를 호출하여 해당 페이지의 콘텐츠를 보여줍니다.
function generatePagination(totalPages) {
for (var i = 1; i <= totalPages; i++) {
var listItem = $('<li class="page-item">' + i + '</li>');
listItem.data('page', i);
listItem.click(function() {
var pageNumber = $(this).data('page');
handlePageClick(pageNumber);
});
$('#pagination').append(listItem);
}
}
초기화
마지막으로, 초기화 함수를 호출하여 페이지 번호를 생성하고 첫 번째 페이지의 콘텐츠를 표시합니다. 예를 들어, 페이지를 로드하는 시점에 init() 함수를 호출하여 초기화할 수 있습니다.
function init() {
// 전체 페이지 수를 API를 통해 받아옴
var totalPages = 10;
// 페이지 번호 생성
generatePagination(totalPages);
// 첫 번째 페이지의 콘텐츠를 표시
handlePageClick(1);
}
$(document).ready(function() {
init();
});
위의 소스 코드를 적용하면 jQuery를 사용하여 간단하게 페이지를 나누고 데이터를 로드하고 업데이트할 수 있습니다. 이렇게 구현한 페이징 처리는 사용자가 더 많은 콘텐츠를 보다 쉽게 탐색할 수 있는 기능을 제공합니다.