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;
}