Pagination.js 커스터마이징

Pagination.js 커스터마이징

안녕하세요. TriplexLab입니다. 

즐거운 주말 보내고 있으신가요?ㅎ 오늘은 jQuery 플러그인중에 Pagination.js 커스텀 마이징을 간단하게 해보왔습니다. 
모두 개시판 만들 때 기본적으로 pagination을 많이 쓰실 겁니다.

이것을 응용해서 more(더 보기) 기능으로 튜닝해 봤습니다. 

<div id="data-container"></div>
<div id="pagination-container"></div>

 

@-webkit-keyframes fadeInFromNone { 
  0% { display: none; opacity: 0; }
  100% { display: block; opacity: 1;}
}

@-moz-keyframes fadeInFromNone {
  0% { display: none; opacity: 0; }
  100% { display: block; opacity: 1; }
}

@-o-keyframes fadeInFromNone {
  0% { display: none; opacity: 0; }
  100% { display: block; opacity: 1;}
}

@keyframes fadeInFromNone {
  0% { display: none; opacity: 0; }
  100% { display: block; opacity: 1; }
}

.list.active {
  opacity: 0;
  display: none;
}

.list {
  display: block;
  -webkit-animation: fadeInFromNone 0.6s ease-out;
  -moz-animation: fadeInFromNone 0.6s ease-out;
  -o-animation: fadeInFromNone 0.6s ease-out;
  animation: fadeInFromNone 0.6s ease-out;
}

 

 $( document ).ready(function() {
            var currentIdx = 0, startIdx = 0, endIdx = 0, totalNum = 0;
            
            function simpleTemplating(data, pagination) {
                var html = '';
                    $.each(data, function(index, item){
                        html += '<div class="list"> '
                        html += '<a href="'+item['link']+'" target="_blank">'+ item['title'] +'</a>'
                        html += '</div>'
                    });
                return html;
            };

            function moreTemplat(endIdx, totalNum) {
                var template = '';
                template += '<div class="more">';
                template += '<span class="currentIdx"><a href="#0"> 더보기 </a></span>';
                template += '<span>'+endIdx+'/</span>'
                template += '<span>'+totalNum+'</span>'
                template += '</div>';
                return template;
            };

           $('#pagination-container').pagination({
                dataSource: 'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
                locator: 'items',
                showPrevious: false,
                showNext: false,
                pageSize: 5,
                ajax: {
                    beforeSend: function() {
                        $('#data-container').html('Loading data from flickr.com ...');
                    }
                },
                callback: function(data, pagination) {
                    currentIdx = pagination.pageSize;
                    var htmlTemplat = simpleTemplating(data, pagination);
                    $('#data-container').html(htmlTemplat);

                    $('.list').each(function(idx, item) {
                        if(idx + 1 > pagination.pageSize) $(this).addClass('active');
                    });

                    totalNum = $('.list').length;
                    $('#pagination-container').html(moreTemplat(currentIdx, totalNum));

                    $('#pagination-container').on('click', function(e) {
                        if(endIdx >= data.length) return false;
                        if(currentIdx > pagination.pageSize) {
                            startIdx = endIdx;
                        } else {
                            startIdx = pagination.pageSize;
                        }
                        endIdx = startIdx + pagination.pageSize;

                        $('.list').each(function(idx, item)  {
                            if (idx + 1 >= startIdx && idx < endIdx) {
                                $(this).removeClass('active');
                            }
                        });

                        currentIdx += pagination.pageSize;

                        $('#pagination-container').html(moreTemplat( endIdx, totalNum));

                        if(currentIdx >= totalNum) { // currentIdx의 개수보다 아이템의 개수가 작을 경우 (연속 더보기 클릭후 맨 마지막인 경우)
                            $('#pagination-container').html(moreTemplat(totalNum, totalNum));
                            return false;
                        }
                    });
                }
            });
});

pagination.js만 보면 물론 정말 쓴만한 플러그인 입니다.
다양한 옵션들을 제공하므로써 쉽게 게시판을 구현 할수 있습니다. 
저는 이것을 가지고, 커스터마이징 하므로써 더 쉽게 more(더보기) 기능을 만들어 봤습니다. 
필요하신분들을 하단에 파일 다운 받아서 사용 하세요. 

Pagination-Customizing.zip

0.01MB

 

pagination.js 커스터마이징 2번째 이야기가 궁금하신 분들은 아래링크 참고하세요👇👇

Pagination.js 커스터마이징2