/** * 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 += '
     
      ';        html += '
      «';        html += '
      ...';        for (var i = 1; i <= showPage; i++) {            html += '
      ';                 }        html += '
      ...';        html += '
      »
     
';        $(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;}