준호씨의 블로그
pagination.js 기본 예제 본문
Pagination.js 는 jQuery 플러그인으로 리스트 형식의 데이터의 페이징을 쉽게 구현하는데 도움을 줍니다.
Pagination.js 를 제공하는 공식홈페이지 (https://pagination.js.org/) 에 사용하는 방법에 대해서 설명이 나오긴 한데요.
다만 설명이 좀 축약 되어 있다 보니 처음 사용해 보는 사람이 바로 사용해 보기는 어렵습니다. 그래서 살을 좀 더 붙여서 예제를 만들어 보았습니다.
아래는 예제의 전체 소스 코드 입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pagination example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.css"/>
</head>
<body>
<div>
<section>
<div id="data-container"></div>
<div id="pagination"></div>
</section>
</div>
<script>
$(function () {
let container = $('#pagination');
container.pagination({
dataSource: [
{name: "hello1"},
{name: "hello2"},
{name: "hello3"},
{name: "hello4"},
{name: "hello5"},
{name: "hello6"},
{name: "hello7"},
{name: "hello8"},
{name: "hello9"},
{name: "hello10"},
{name: "hello11"},
{name: "hello12"},
{name: "hello13"},
{name: "hello14"},
{name: "hello15"},
{name: "hello16"},
{name: "hello17"},
],
callback: function (data, pagination) {
var dataHtml = '<ul>';
$.each(data, function (index, item) {
dataHtml += '<li>' + item.name + '</li>';
});
dataHtml += '</ul>';
$("#data-container").html(dataHtml);
}
})
})
</script>
</body>
</html>동작하는 모습을 보고 싶으시면 아래 링크에서 확인 해 보시기 바랍니다.
See the Pen pagination.js sample by June Kim (@junho85) on CodePen.
좀 더 자세한 설명
head 에서 js 와 css 불러 오기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.css"/>우선 head 테그에 jquery, paginationjs javascript 파일을 불러오고, paginationjs 의 css 를 적용하기 위해 css 파일도 불러옵니다. 해당 파일들을 저장해서 직접 호스팅 해도 되겠지만 글로벌 하게 사용할 용도로 CDN(content delivery network) 에도 올라와 있으니 그걸 사용하셔도 됩니다.
데이터와 페이지 막대를 보여줄 영역
<div id="data-container"></div>
<div id="pagination"></div>
id 는 원하는 명칭을 사용하시면 됩니다. 저는 데이터를 표시해줄 영역으로 "data-container", 페이지 막대를 보여줄 영역으로 "pagination" 을 만들어 주었습니다.
script
<script>
$(function () {
let container = $('#pagination');
container.pagination({
dataSource: [
{name: "hello1"},
{name: "hello2"},
{name: "hello3"},
{name: "hello4"},
{name: "hello5"},
{name: "hello6"},
{name: "hello7"},
{name: "hello8"},
{name: "hello9"},
{name: "hello10"},
{name: "hello11"},
{name: "hello12"},
{name: "hello13"},
{name: "hello14"},
{name: "hello15"},
{name: "hello16"},
{name: "hello17"},
],
callback: function (data, pagination) {
var dataHtml = '<ul>';
$.each(data, function (index, item) {
dataHtml += '<li>' + item.name + '</li>';
});
dataHtml += '</ul>';
$("#data-container").html(dataHtml);
}
})
})
</script>우선 페이지 막대를 그려줄 pagination div 를 선택합니다. 그 div 에서 pagination 함수를 작성합니다. pagination 함수에는 여러 가지 속성을 넣어 줄 수 있습니다.
가장 중요한 속성으로 dataSource 가 있습니다. dataSource 에는 배열로 된 데이터를 넣어 줍니다. 미리 만들어둔 객체를 불러와도 되고, 원격으로 불러올 url 을 사용해도 됩니다. 이 예제에서는 dataSource 에 직접 배열객체를 입력 했습니다. hello1 부터 hello17 까지 17개의 데이터를 만들어 보았습니다. paginationjs 의 기본 페이지당 데이터 갯수는 10개 입니다. 그러니 2페이지로 결과가 나오겠죠?
callback 함수의 첫번째 인자에는 dataSource 에서 페이징 하고 난 데이터가 나옵니다. 1페이지에는 hello1 부터 hello10 까지의 데이터 10개가 들어 있습니다. 이 예제에서는 list 형식으로 나타내기 위해 <ul> 과 <li>를 이용해서 html 태그를 작성하였습니다. 작성된 html 태그를 data-container div 에 그려주고 마무리 합니다.
여기서는 사용하지 않았지만 pageSize 속성을 이용하면 페이지당 나타낼 데이터의 갯수를 지정 할 수 있습니다.
showPrevious, showNext 속성을 false 로 기입해 주면 좌측, 우측 끝에 보여지는 "<<", ">>" 버튼이 사라집니다.
유용한 기능들이 많이 있으니 자세한 사용법은 https://pagination.js.org 에서 확인해 보시기 바랍니다.
'개발이야기' 카테고리의 다른 글
| tomcat 6 설치하기 (0) | 2019.10.14 |
|---|---|
| Mac OS Catalina 10.15 에서 Java 6 설치 하는 방법 (0) | 2019.10.14 |
| Kotlin 관련 사이트 모음 (0) | 2019.09.22 |
| if (kakao) dev 2019 카카오개발자 컨퍼런스 메모 (0) | 2019.09.01 |
| git branch 삭제 (0) | 2019.08.27 |
