jQuery 페이지 나누기 플러그인

/**

 * jQuery    

 */

+function($){

    $.fn.pagination = function(options){

        //     

        var defaults = {

            totalCount: 100, //    

            showPage: 5, //      

            currentPage: 1, //    

            perPage: 10, //       

            callback: function (currentPage, perPage) { //     

                console.log(currentPage + ':' + perPage);

            }

        };



        $.extend(defaults, options || {});

        var totalCount = parseInt(defaults.totalCount),

            showPage = parseInt(defaults.showPage),

            perPage = parseInt(defaults.perPage),

            totalPage = Math.ceil(totalCount / perPage),

            currentPage = parseInt(defaults.currentPage),

            centerSep = Math.ceil(showPage / 2),

            html = '';

        // html     

        showPage = showPage < totalPage ? showPage : totalPage;

        html += '<div class="pagination">';

        html += '<a class="pagination-prev" href="javascript:;">&laquo;</a>';

        html += '<a class="pagination-disabled" href="javascript:;">...</a>';

        for (var i = 1; i <= showPage; i++) {

            html += '<a class="pagination-num" href="javascript:;"></a>';         

        }

        html += '<a class="pagination-disabled" href="javascript:;">...</a>';

        html += '<a class="pagination-next" href="javascript:;">&raquo;</a></div>';

        $(this).html(html);

        

        var $pagination = $(this).find('.pagination'),

            $prev = $pagination.find('.pagination-prev'),

            $next = $pagination.find('.pagination-next'),

            $num = $pagination.find('.pagination-num');



        setCurrentPage();



        //     

        $pagination

            .delegate('.pagination-num', 'click', function(e) {

                currentPage = parseInt($(this).html());

                setCurrentPage();

            })

            .delegate('.pagination-prev', 'click', function(e) {

                currentPage--;

                setCurrentPage();

            })

            .delegate('.pagination-next', 'click', function(e) {

                currentPage++;

                setCurrentPage();

            });



        //          

        function setCurrentPage(){

            currentPage = currentPage > totalPage ? totalPage : currentPage;

            currentPage = currentPage < 1 ? 1 : currentPage;



            if(currentPage == 1){

                $prev.addClass('pagination-disabled');

            }else{

                $prev.removeClass('pagination-disabled');

            }



            if(currentPage == totalPage){

                $next.addClass('pagination-disabled');

            }else{

                $next.removeClass('pagination-disabled');

            }



            if(currentPage - centerSep <= 0){

                $prev.next().addClass('pagination-hidden');

            }else{

                $prev.next().removeClass('pagination-hidden');

            }

            if(currentPage + centerSep > totalPage){

                $next.prev().addClass('pagination-hidden');

            }else{

                $next.prev().removeClass('pagination-hidden');

            }



            $num.removeClass('pagination-active').each(function (index, el) {

                if(currentPage - centerSep < 0){

                    index += 1;

                }else if(currentPage + centerSep > totalPage) {

                    index = totalPage - showPage + index + 1;

                }else {

                    index = currentPage - centerSep + index + 1;

                }

                

                if(index == currentPage){

                    $(el).addClass('pagination-active');

                }

                $(el).html(index);

            });



            $.isFunction(defaults.callback) && defaults.callback(currentPage, perPage);

        }

    }

}(jQuery);

* {

    margin: 0;

    padding: 0;

}



.pagination {

    text-align: center;

}



.pagination a {

    display: inline-block;

    padding: 5px 15px;

    margin-left: -1px;

    color: #428bca;

    text-decoration: none;

    background-color: #fff;

    border: 1px solid #ddd;

}



.pagination a:hover {

    color: #2a6496;

    background-color: #eee;

    border-color: #ddd;

}



.pagination .pagination-disabled,

.pagination .pagination-disabled:hover {

    color: #777;

    cursor: default;

    background-color: #fff;

    border-color: #ddd;

}



.pagination .pagination-active,

.pagination .pagination-active:hover {

    color: #fff;

    cursor: default;

    background-color: #428bca;

    border-color: #428bca;

}



.pagination .pagination-hidden {

    display: none;

}