常用分页组件

(function ($) {
    $.fn.extend({
        jqPaginator:function (opt){
            var defaults = {
                totalNum:0,  //总条数
                currentPage:1,  //当前显示页
                pageSize:10,   //当前显示条目数
                pagesSize:[5,10,50,100], //显示条目数 select
                elem:this,
                totalPage:0,
                targetPage:1,
                callback:null
            }
             var set = $.extend(defaults,opt||{});
             set.totalPage = Math.ceil(set.totalNum/set.pageSize) ;
            var _parent= this;
            if(set.currentPage>set.totalPage||set.currentPage<1){
                set.currentPage = 1;
            }
            var n = 0,htm = '';
            var clickpages = {
                elem:set.elem,
                callback:set.callback,
                init:function(){
                    this.elem = $(_parent).find(".pagination");
                    this.jumpPages();
                    this.initSelect();
                    this.elem.children('li').click(function () {
                        var txt = $(this).children('a').text();
                        var btn = $(this).children('a').attr("data-target");
                        var page = '', ele = null;
                        var page1 = parseInt(clickpages.elem.children('li.active').attr('page'));
                        if (isNaN(parseInt(txt))) {
                            switch (btn) {
                                case 'next':
                                    if (page1 == set.totalPage) {
                                        return;
                                    }
                                    if (page1 >= (set.totalPage - 2) || set.totalPage <= 6 || page1 < 3) {
                                        ele = clickpages.elem.children('li.active').next();
                                        set.currentPage = page1;
                                    } else {
                                        clickpages.newPages('next', page1 + 1);
                                        ele = clickpages.elem.children('li.active');
                                    }
                                    break;
                                case 'pre':
                                    if (page1 == '1') {
                                        return;
                                    }
                                    if (page1 >= (set.totalPage - 1) || page1 <= 3 || set.totalPage <= 6) {
                                        ele = clickpages.elem.children('li.active').prev();
                                        set.currentPage = page1;
                                    } else {
                                        clickpages.newPages('pre', page1 - 1);
                                        ele = clickpages.elem.children('li.active');
                                    }
                                    break;
                                case 'first':
                                    if (page1 == '1') {
                                        return;
                                    }
                                    if (set.totalPage > 6) {
                                        clickpages.newPages('first', 1);
                                    }
                                    ele = clickpages.elem.children('li[page=1]');
                                    break;
                                case 'last':
                                    if (page1 == set.totalPage) {
                                        return;
                                    }
                                    if (set.totalPage > 6) {
                                        clickpages.newPages('last', set.totalPage);
                                    }
                                    ele = clickpages.elem.children('li[page=' + set.totalPage + ']');
                                    break;
                                case 'ellipsis':
                                    if($(this).find("a").hasClass("ellipsisL")){
                                        if(set.currentPage-5<1){
                                            set.currentPage = 1;
                                        }
                                        else{
                                            set.currentPage -= 5;
                                        }
                                    }else {
                                        if(set.currentPage+5>set.totalPage){
                                            set.currentPage = set.totalPage;
                                        }
                                        else{
                                            set.currentPage += 5;
                                        }
                                    }
                                    clickpages.newPages('jump',set.currentPage );
                                    ele = clickpages.elem.children('li[page=' + set.currentPage + ']');
                                    break;
                            }
                        } else {
                            if ( set.totalPage > 6) {
                                clickpages.newPages('jump', parseInt(txt));
                            }
                            ele = $(this);
                        }
                        set.currentPage = clickpages.actPages(ele);
                        clickpages.setCursor();
                        if (clickpages.callback){
                          set.callback(set.pageSize,set.currentPage);
                        }
                    });
                },
                setCursor:function () {
                    $(_parent).find(".pre").css({cursor:set.currentPage==1?"no-drop":"pointer"});
                    $(_parent).find(".next").css({cursor:set.currentPage==set.totalPage?"no-drop":"pointer"})
                },
                //active
                actPages:function (ele) {
                    if(!ele){
                        return;
                    }
                    ele.addClass('active').siblings().removeClass('active');
                    return parseInt(clickpages.elem.children('li.active').text());
                },
                initSelect:function () {
                    $(_parent).find(".pageSizeSelect li").on("click",function (e) {
                         $(_parent).find(".pageSizeSelect ul").slideUp(300);
                         $(this).parents(".pageSizeSelect").find("input").val($(this).text());
                         set.pageSize = parseInt($(this).text());
                         set.totalPage = Math.ceil(set.totalNum/set.pageSize) ;
                         set.currentPage =1 ;
                         $(_parent).find(".pageSizeSelect .icon_select").removeClass("animateRotate");
                            if (clickpages.callback){
                                set.callback(set.pageSize,set.currentPage);
                          }
                        initPage();
                        /*   setTimeout(function () {
                               initPage(); //动画执行完后再 重绘
                           },500)*/
                    });
                    $(_parent).find(".pageSizeSelect .initPageClick").on("click",function (e) {
                        $(_parent).find(".pageSizeSelect ul").slideDown(300);
                        $(_parent).find(".pageSizeSelect .icon_select").addClass("animateRotate");
                    })
                },
                jumpPages:function () {
                    this.elem.next('div.pageJump').children('.curPage').on("keydown",function(e){
                        if(!(e.keyCode==13)){
                            return ;
                        }
                        var i = parseInt($(this).val());
                        if(i>set.totalPage){
                            set.currentPage = set.totalPage;
                            set.targetPage = set.totalPage;
                            initPage();
                        }else if(set.totalPage>6){
                            set.currentPage = i;
                            set.targetPage = i;
                            initPage();
                        }else{
                            set.currentPage = i;
                            set.targetPage = i;
                            var ele = clickpages.elem.children('li[page='+i+']');
                            clickpages.actPages(ele);
                            if (clickpages.callback){
                                set.callback(set.pageSize,set.currentPage);
                            }
                            return;
                        }

                        if (clickpages.callback){
                            set.callback(set.pageSize,set.currentPage);
                        }
                    })
                },

                //newpages
                newPages:function (type, i) {
                    set.currentPage = i;
                    var html = "",htmlLeft="",htmlRight="",htmlC="";
                    var HL = '<li><a data-target="ellipsis"  class="ellipsis ellipsisL" title="向前五页">.</a></li>';
                    var HR = '<li><a data-target="ellipsis"  class="ellipsis ellipsisR" title="向后五页">.</a></li>';
             /*       var html='<li><a  data-target="first" class="pagination_btn first"></a></li>
                    <li><a data-target="pre" class="pagination_btn pre"></a></li>';*/
                    var html='<li><a data-target="pre" class="pagination_btn pre" style="cursor: '+(set.currentPage==1?"no-drop":"pointer")+'"></a></li>';
                    for (var n = 0;n<3;n++){
                        htmlC += '<li '+((n-1)==0?'class="active"':'')+' page="'+(i+n-1)+'"><a>'+(i+n-1)+'</a></li>';
                        htmlLeft += '<li '+((n+2)==i?'class="active"':'')+' page="'+(n+2)+'"><a>'+(n+2)+'</a></li>';
                        htmlRight += '<li '+((set.totalPage+n-3)==i?'class="active"':'')+' page="'+(set.totalPage+n-3)+'"><a>'+(set.totalPage+n-3)+'</a></li>';
                    }

                    switch (type) {
                        case "next":
                            if(i<=4){
                                html+='<li page="1"><a>1</a></li>'+htmlLeft+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
                            }else if(i>=(set.totalPage-3)){
                                html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
                            }else{
                                html += '<li page="1"><a>1</a></li>'+HL+htmlC+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
                            }
                            break;
                        case "pre":
                            if(i<=4){
                                html+='<li page="1"><a>1</a></li>'+htmlLeft+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
                            }else if(i>=(set.totalPage-3)){
                                html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
                            }else{
                                html += '<li page="1"><a>1</a></li>'+HL+htmlC+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
                            }
                            break;
                        case "first" :
                            html+='<li class="active" page="1"><a>1</a></li>'+htmlLeft+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
                            break;
                        case "last" :
                            html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li class="active" page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
                            break;
                        case "jump" :
                            if(i<=4){
                                if(i==1){
                                    html+='<li class="active" page="1"><a>1</a></li>'+htmlLeft+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
                                }else{
                                    html+='<li page="1"><a>1</a></li>'+htmlLeft+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
                                }
                            }else if((i>=set.totalPage-3)&&(set.totalPage>=7)){
                                if(i==set.totalPage){
                                    html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li class="active" page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
                                }else{
                                    html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
                                }
                            }else{
                                html += '<li page="1"><a>1</a></li>'+HL+htmlC+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
                            }
                    }
                   /* html +='<li><a data-target="next" class="pagination_btn next"></a></li>
                    <li><a  data-target="last" class="pagination_btn last"></a></li>';*/
                     html +='<li><a data-target="next" class="pagination_btn next" style="cursor: '+(set.currentPage==set.totalPage?"no-drop":"pointer")+'"></a></li>';
                    if (set.totalPage > 5 || set.totalPage < 3) {
                        _parent.html(getTemplate(html));
                        clickpages.init();
                    }
                }
            }

            var getTemplate = function (html) {
                var template = '';
                var cssStyle =  (window.innerHeight-_parent[0].getBoundingClientRect().bottom)>130?"top:34px":"bottom:34px";
                var warpper = "<ul class='pagination'>"+html+"</ul>";
                var pageSizeTemplate = "";
                set.pagesSize.forEach(function (item,index) {
                    pageSizeTemplate += "<li>"+item+"</li>" ;
                })
                var first = '<div class="totalPage">共 <span>'+set.totalNum+'</span> 条</div> <div class="pageSizeSelect"><i class="icon_select initPageClick"></i><input type="text" readonly class="pageSize initPageClick" value="'+set.pageSize+'"><ul style="display: none;'+cssStyle+'">'+pageSizeTemplate+'</ul></div>';
                var end = '<div class="pageJump"> <span>跳转至</span> <input type="text" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" class="curPage" value="'+set.targetPage+'"/> <span>页</span></div>';
                template = '<div class="z_wrapperPage">' +first + warpper + end+'</div>';
                return template
            }

            var initPage =  function () {
                if(set.totalPage<1){
                    $(set.elem).html('');
                    return;
                }else if(parseInt(set.totalPage)<=6){
                    n = parseInt(set.totalPage);
                    var html='<li><a data-target="pre" class="pagination_btn pre" style="cursor: '+(set.currentPage==1?"no-drop":"pointer")+'"></a></li>';
                    for(var i=1;i<=n;i++){
                        if(i==set.currentPage){
                            html+='<li class="active" page="'+i+'"><a>'+i+'</a></li>';
                        }else{
                            html+='<li page="'+i+'"><a>'+i+'</a></li>';
                        }
                    }
                    html +='<li><a data-target="next" class="pagination_btn next" style="cursor: '+(set.currentPage==set.totalPage?"no-drop":"pointer")+'"></a></li>';
                    _parent.html(getTemplate(html));
                    clickpages.init();
                }else{
                    clickpages.newPages("jump",set.currentPage)
                }
            }
            initPage();
            this.opt = set;
            this.setTotalNum = function(totalNum){
                set.totalNum = totalNum ;
                set.totalPage = Math.ceil(set.totalNum/set.pageSize) ;
                initPage();
            };
            this.setCurrentPage = function(currentPage){
                set.currentPage = currentPage ;
                initPage();
            };
            return this ;
        }
    })

    $(document).on("click",function (e) {
        if($(e.target).hasClass("initPageClick")){
        // if(e.target.localName == 'input' && $(e.target).hasClass("pageSize")){
            // 点击select input
        }
        else {
            $(".z_wrapperPage").find(".pageSizeSelect ul").slideUp(300);
            $(".pageSizeSelect .icon_select").removeClass("animateRotate");
        }
    })
})(jQuery);

使用方法如下所示:

============================================

var sitePagination = $("#sitePagination").jqPaginator({
    totalNum:0,  //总条数
    currentPage:1,  //当前显示页
    pageSize:10,   //当前显示条目数
    pagesSize:[5,10,50,100], //显示条目数 select
    callback:function(pageSize,currentPage){   //回调函数
  
        siteTotalFn(pageSize,currentPage);
    }
})

// 初始化

siteTotalFn(sitePagination.opt.pageSize, 1);

// ajax 请求之后

sitePagination.setTotalNum(data.total);
sitePagination.setCurrentPage(currentPage);