준호씨의 블로그

pagination.js 기본 예제 본문

개발이야기

pagination.js 기본 예제

준호씨 2019. 9. 27. 22:24
반응형

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 에서 확인해 보시기 바랍니다.

반응형
Comments