使用的是jquery.z-pager.js插件，底部有其完整代碼，
前端一般只需獲取后臺的幾個分頁屬性對應(yīng)的值，并通過調(diào)用下面方法就可以觸發(fā)：
（current：當(dāng)前頁碼數(shù)，totalData：數(shù)據(jù)總條數(shù)）

/*分頁*/
    var pageNo = "${page.pageNo}";
    var count = "${page.count}";
    $("#pager").zPager({
        current: pageNo,
        totalData: count
    });
   $("#pager a").click(function(){
        pageNo = $(this).attr("page-id");
        var add = "${pc}/front/activity/list?pageNo="+pageNo;
        $(this).attr('href', add);
    })

HTML：

<div style="text-align: center;margin:20px auto;">
       <div id="pager" class="pager clearfix"></div>
</div>

CSS(記得里面的url要填對對應(yīng)的圖標(biāo)圖片路徑)：

.fl {
    float: left;
}
.fr {
    float: right;
}
.pager {
    max-width: 800px;
    text-align: center;
    margin-bottom: 30px;
    display: inline-block;
}
.pager a{
    cursor: pointer;
}
.pager a,
.pager span {
    width: 29px;
    height: 28px;
    border: 1px #cccccc solid;
    margin-left: -1px;
    color: #8a8a8a;
    display: inline-block;
    line-height: 28px;
    float: left;
    font-size: 12px;
    text-decoration: none;
    margin: 0 2px;
}
.pager a:hover,
.pager span:hover {
    border-color: #3897cd;
    color: #3897cd;
    position: relative;
    z-index: 1;
}
.pager span.current {
    background-color: #3897cd;
    color: #fff;
    border-color: #3897cd;
    position: relative;
    z-index: 1;
}
.pager .pg-first,
.pager .pg-prev,
.pager .pg-next,
.pager .pg-last{
    background: url(../images/page_bg.jpg) 0 0 no-repeat;
}
.pager .pg-first:hover,
.pager .pg-prev:hover,
.pager .pg-next:hover,
.pager .pg-last:hover{
    background: url(../images/page_bg_hover.jpg) 0 0 no-repeat;
}
.pager .pg-prev,
.pager .pg-prev:hover{
    background-position: 0 -28px;
}
.pager .pg-next,
.pager .pg-next:hover{
    background-position: -29px -28px;
}
.pager .pg-last,
.pager .pg-last:hover{
    background-position: -29px 0;
}
.pager .pg-prev[disabled='true'],
.pager .pg-prev[disabled='true']:hover{
    cursor: default;
    background-image: url(../images/page_bg.jpg);
}
.pager .pg-next[disabled='true'],
.pager .pg-next[disabled='true']:hover{
    cursor: default;
    background-image: url(../images/page_bg.jpg);
}
.pager .pg-prev[disabled='true'],
.pager .pg-next[disabled='true']{
    border-color: #eeeeee;
}
.pager span.els{
    border-color: transparent;
}

.pagerHtmlWrap{
    width: 800px;
    margin: 30px auto;
}
.pagerHtmlWrap .cc_cells{
    width: 100%;
    height: 35px;
    padding: 5px 0;
    border-bottom: 1px #cccccc solid;
}
.pagerHtmlWrap .cc_cells a{
    color: #454545;
    font-size: 14px;
    line-height: 35px;
    text-decoration: none;
}
.pagerHtmlWrap .cc_cells a span{
    display: inline-block;
    width: 25%;
    text-align: left;
    margin: 0;
}

圖片（默認(rèn)圖和hover圖）：

page_bg.jpg

page_bg_hover.jpg

這是jquery.z-pager.js插件的完整代碼（底部可以更改默認(rèn)的分頁屬性）：

;(function($){
    var methods = {
        pageInit: function(options){
            /**
             * [opts this plug propertys]
             * @type {Obeject}
             */
            var opts = $.extend({},$.fn.zPager.defaults,options);
            return $(this).each(function(k,v){
                var _v = $(v);
                _v.data("options",opts);
                methods.pageData(_v, opts.current);
            })
        },
        pageData: function(_v, _current){
            /**
             * [opts this plug propertys]
             * @type {Obeject}
             */
            var opts = _v.data("options");
            var t = opts.totalData, p = opts.pageData, ajaxOpts = null;
            if(opts.ajaxSetData&&(typeof(opts.ajaxSetData)==='boolean')){
                if(opts.url!=='' && typeof(opts.url)==='string'){
                    ajaxOpts = methods.ajaxData(opts.url, _current);
                    t = opts.totalData = ajaxOpts.total;
                    if(ajaxOpts.rows.length>0){
                        var ishasDataRender = (opts.dataRender && typeof(opts.dataRender)==='function');
                            ishasDataRender ? opts.dataRender(ajaxOpts.rows) : methods.dataRender(_v, ajaxOpts.rows);
                    }
                }else{
                    $.pageError(2);
                }
            }
            if(t%p === 0){
                opts.pageCount = parseInt(t/p);
            }else{
                opts.pageCount = parseInt(t/p)+1;
            }
            if(opts.pageCount>0){
                _v.data("options",opts);
                methods.pageRender(_v, _current);
            }
        },
        dataRender: function(_v, _data){
            var opts = _v.data("options");
            var cells = '';
                for(var i=0;i<_data.length;i++){
                    cells += '<div class="cc_cells"><a href=""><span>'+_data[i].id+'-'+Math.random()+'</span>';
                    cells += '<span>'+_data[i].title+'</span>';
                    cells += '<span>'+_data[i].starttime+'</span>';
                    cells += '<span>'+_data[i].endtime+'</span>';
                    cells += '</a></div>';
                }
            if(opts.htmlBox===''||(typeof(opts.htmlBox)!=='Obeject')){
                var abx = _v.prev();
                if(!abx.hasClass('pagerHtmlWrap')){
                    var d = '<div class="pagerHtmlWrap"></div>';
                    _v.before(d);
                }
                _v.prev().html(cells);
            }else{
                opts.htmlBox.html(cells);
            }
        },
        pageRender: function(_v, _current){
            /**
             * [o this plug propertys]
             * @type {Obeject}
             */
            var o = _v.data("options");
            var _page = o.pageCount;

            var _middle = parseInt(o.pageStep/2);
            var _tep = _middle-2;
            var _html = '';
            if(_page>o.pageStep&&_current<=_page){
                _html += methods.setPrevNext(o, 'prev');
                if(_current<=_middle){
                    _html += methods.forEach(1, o.pageStep, _current, o.active);
                    _html += methods.elliPsis();
                }else if(_current>_middle&&_current<(_page-_tep)){
                    _html += methods.pageBtn(1);
                    _html += methods.elliPsis();
                    _html += methods.forEach(_current-_tep, _current-(-_tep)-(-1), _current, o.active);
                    _html += methods.elliPsis();
                }else if(_current>=(_page-_tep)){
                    _html += methods.pageBtn(1);
                    _html += methods.elliPsis();
                    _html += methods.forEach(_page-2*_tep-1, _page-(-1), _current, o.active);
                }
                _html += methods.setPrevNext(o, 'next');
            }else if(_page<=o.pageStep){
                if(_page>o.minPage){
                    _html += methods.setPrevNext(o, 'prev');
                }
                _html += methods.forEach(1, _page-(-1), _current, o.active);
                if(_page>o.minPage){
                    _html += methods.setPrevNext(o, 'next');
                }   
            }
            _v.html(_html);
            methods.bindEvent(_v);
        },
        bindEvent: function(_v){
            /**
             * [o this plug propertys]
             * @type {Obeject}
             */
            var o = _v.data("options");
            var _a = _v.find("a");
                $.each(_a,function(index,item){
                    var _this = $(this);
                    _this.on("click",function(){
                        if(_this.attr("disabled")){
                            return false;
                        }
                        var _p = _this.attr("page-id");
                        o.current = _p;
                        _v.data("options",o);
                        // methods.options.current = _p;
                        methods.pageData(_v, _p);
                    })
                })
        },
        forEach: function(_start,length,_current,curclass){
            /**
             * [s page elements]
             * @type {String}
             */
            var s = '';
            for(var i = _start;i<length;i++){
                if(i === parseInt(_current)){
                    s += methods.pageCurrent(i,curclass);
                }else{
                    s += methods.pageBtn(i);
                }
            }
            return s;
        },
        pageCurrent: function(_id,_class){
            /**
             * [class current page element calss]
             * @type {String}
             */
            return '<span class="'+_class+'" page-id="'+_id+'">'+_id+'</span>';
        },
        elliPsis: function(){
            /**
             * [class ellipses...]
             * @type {String}
             */
            return '<span class="els">...</span>';
        },
        pageBtn: function(_id){
            /**
             * [id page id]
             * @type {String}
             */
            return '<a page-id="'+_id+'">'+_id+'</a>';
        },
        addBtn: function(_property, _page, _count){
            /**
             * [disabled is it can click button]
             * @type {Boolean}
             */
            var disabled = '';
            if(_count){
                disabled = (_page === 0 || _page === _count-(-1)) ? 'disabled="true"':'';
            }
            return '<a class="'+_property+'" page-id="'+_page+'" '+disabled+'></a>';
        },
        setPrevNext: function(_o, _type){
            /**
             * [s string create prev or next buttons elements]
             * @type {String}
             */
            var s = '';
            function prev(){
                if(_o.btnShow){
                    s += methods.addBtn(_o.firstBtn, 1); 
                }
                if(_o.btnBool){
                    s += methods.addBtn(_o.prevBtn, _o.current-1, _o.pageCount);
                }
                return s;
            }
            function next(){
                if(_o.btnBool){
                    s += methods.addBtn(_o.nextBtn, _o.current-(-1), _o.pageCount);
                }
                if(_o.btnShow){
                    s += methods.addBtn(_o.lastBtn, _o.pageCount);
                }
                return s;
            }
            return _type==='prev'? prev(): next();
        },
        ajaxData: function(_url, _current){
            /**
             * [ajax get data and pagenumber]
             * @param  {Object} ){ var parms [ajax url,current page number]
             * @return {[type]}            [obj total rows]
             */
            var _total = $.fn.zPager.defaults.totalData;
            return (function(){
                var parms = {'total':_total,'rows':[]};
                $.ajax({
                    url: _url,
                    type: 'get',
                    data: {"page":_current},
                    dataType: 'json',
                    cache : false,  
                    async : false,
                    success: function(data) {
                        if(data.total && (data.total!==0)){
                            parms['total'] = data.total;
                            parms['rows'] = data.rows;
                        }else{
                            $.pageError(3);
                        }
                    },
                    error: function(XMLHttpRequest,textStatus,errorThrown) {
                        var msg = '';
                        switch(XMLHttpRequest.readyState){
                            case 0:
                                msg = '（未初始化）還沒有調(diào)用send()方法';
                                break;
                            case 1:
                                msg = '（載入）已調(diào)用send()方法，正在發(fā)送請求';
                                break;
                            case 2:
                                msg = '（載入完成）send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容';
                                break;
                            case 3:
                                msg = '（交互）正在解析響應(yīng)內(nèi)容';
                                break;
                            case 4:
                                msg = '（完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了';
                                break;
                        }
                        console.log(textStatus+'：'+XMLHttpRequest.readyState+'-'+msg);
                    }
                })
                return parms;
            })();
        }
    }

    $.extend({
        pageError:function(type){
            /**
             * [switch error type]
             * @param  {[type]} type [no this function]
             * @return {[type]}      [ajax error]
             */
            switch(type){
                case 1:
                    console.log('method'+method+'dose not exist on jQuery.zPager');
                    break;
                case 2:
                    console.log('no ajax');
                    break;
                case 3:
                    console.log('no data');
                    break;
                default:
                    console.log('default error');
            }
        }
    })

    $.fn.extend({
        zPager:function(method){
            /**
             * [if has this method]
             * @param  {[type]} methods[method] [apply this method]
             * @return {[type]}                 [return property]
             */
            if(methods[method]){
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            }else if(typeof method === 'object' || !method){
                return methods.pageInit.apply(this, arguments);
            }else{
                $.pageError(1);
            }
        }
    })

    $.fn.zPager.defaults = {
        totalData: 10, //數(shù)據(jù)總條數(shù)
        pageData: 10, //每頁數(shù)據(jù)條數(shù)
        pageCount: 0, //總頁數(shù)
        current: 1, //當(dāng)前頁碼數(shù)
        pageStep: 6, //當(dāng)前可見最多頁碼個數(shù)
        minPage: 0, //最小頁碼數(shù)，頁碼小于此數(shù)值則不顯示上下分頁按鈕
        active: 'current', //當(dāng)前頁碼樣式
        prevBtn: 'pg-prev', //上一頁按鈕
        nextBtn: 'pg-next', //下一頁按鈕
        btnBool: true, //是否顯示上一頁下一頁
        firstBtn: 'pg-first', //第一頁按鈕
        lastBtn: 'pg-last', //最后一頁按鈕
        btnShow: true, //是否顯示第一頁和最后一頁按鈕
        disabled: true, //按鈕失效樣式
        ajaxSetData: true, //是否使用ajax獲取數(shù)據(jù) 此屬性為真時需要url和htmlBox不為空
        url: '', //ajax路由
        htmlBox: '' //ajax數(shù)據(jù)寫入容器
    }

})(jQuery)