手写分页插件

前台需要传入参数：

{

　　业务所需的参数：data

　　分页所需的参数：

　　　　　1.当前要显示的第几页（pageNo）

　　　　　2.每页显示的条数（pageSize）

}

后台返回

{

　　用于展示表格用的数据：data，

　　用于渲染分页用的数据：

　　　　1.总页数（total）

　　　　2.总记录数（records）

　　　　3.当前页（pageNo），这个也可以不传

}

插件的思路：

　　将ajax需要的参数，以及分页所需要的参数都当做公共的参数传入插件函数initPage中；

　　再将所有参数与默认的参数结合，向服务器发送请求，将数据请求回来调用会掉函数渲染表格；

　　其次再渲染分页；

　　最后给分页添加点击事件；

page.js

;(function($){
    $.fn.initPage=function(pobj){
        var option=JSON.parse(JSON.stringify(pobj));
        this.css('display','none');
        var op={
            pageSize:10,//每一页显示数据的条数
            curPage:1//当前页
        },fn=pobj.ajax.success,el=this;
        var opt=$.extend({},op,option)//合并对象
        opt.ajax.data[opt.resKey.pageSize]=opt.pageSize;//每一页显示的条数
        opt.ajax.data[opt.resKey.curPage]=opt.curPage;//那一页
        opt.ajax.success=function(res,mes){
            fn(res,mes);//执行成功后构建表格的方法
            //加载分页
            var countPages=1;//总页数，默认至少有一夜
            var _data=eval("("+res+")")
            //如果有总页数字段
            if(!!_data['records']){
                countPages=Math.ceil(_data['records']/op.pageSize);
            }
            //el.html(creatHtml(countPages,opt.pageNo));
            el.html(creatHtml(countPages,opt.curPage));
            el.fadeIn(160);
            initEvent(el,pobj,countPages);//加载事件
        }
        $.ajax(opt.ajax)
    }
    var creatHtml=function(count,cur){
        cur=parseFloat(cur);
        //左侧图标，如果是第一页就添加class "dis";
        var str='<a href="javascript:;" class="page-btn prev '+(cur==1?'dis':'')+'"><<</a>';
        //中间页数
        //如果总页数小于7,正常全部显示
        if(count<7){
            for(var i=1;i<=count;i++){
                str+='<em class="page-btn '+(cur==i?'cur':'')+'">'+i+'</em>';
            }
        }else{
            //判断当前页数判断是否会出现省略号
            if(cur<3){
                str+='<em class="page-btn '+(cur==1?'cur':'')+'">'+1+'</em>';
                str+='<em class="page-btn '+(cur==2?'cur':'')+'">'+2+'</em>';
                str+='<em class="page-btn">'+3+'</em>';
                str+='<p class="omit">...</p>';
                str+='<em class="page-btn">'+count+'</em>';
            }else if(cur>(count-2)){
                str+='<em class="page-btn">'+1+'</em>';
                str+='<p class="omit">...</p>';
                str+='<em class="page-btn">'+(count-2)+'</em>';
                str+='<em class="page-btn '+(cur==(count-1)?'cur':'')+'">'+(count-1)+'</em>';
                str+='<em class="page-btn '+(cur==count?'cur':'')+'">'+count+'</em>';
            }else{
                str+='<em class="page-btn">'+1+'</em>';
                str+='<p class="omit '+(cur>3?'':'none')+'">...</p>';
                str+='<em class="page-btn">'+(cur-1)+'</em>';
                str+='<em class="page-btn cur">'+(cur)+'</em>';
                str+='<em class="page-btn">'+(cur+1)+'</em>';
                str+='<p class="omit '+(cur<(count-2)?'':'none')+'">...</p>';
                str+='<em class="page-btn">'+count+'</em>';
            }
        }
        //右侧图标，如果是最后一页，也添加class “dis”
        str+='<a href="javascript:;" class="page-btn next '+(cur==count?'dis':'')+'">>></a>';
        var isms=navigator.userAgent.toLowerCase();
        if(isms.indexOf('msie 8.0')!==-1){
            str+='<input type="text" value="跳转">';
        }else{
            str+='<input type="text" placeholder="跳转">';
        }
        return str;
    }
    var initEvent=function(el,opt,max){
        //点击页数
        el.find('em.page-btn').off('click').on('click',function(){
            opt.curPage=$(this).html();
            el.initPage(opt);
        });
        //点击上一页和下一页
        el.find('a.page-btn').off("click").on('click',function(){
            var type=$(this).hasClass("prev")?-1:$(this).hasClass("next")?1:false;
            //opt.curPage+=type;
            opt.curPage=parseFloat(el.find('em.page-btn.cur').html())+type;
            if(opt.curPage<=0){opt.curPage=1}
            if(opt.curPage>max){opt.curPage=max}
            el.initPage(opt);
        })
        //手动输入页码
        el.find('input').off("blur").on('blur',function(){
            var val=$(this).val();
            //验证输入
            if (!(/(^[1-9]\d*$)/.test(val))) {
                alert('请输入正确的页数');
                $(this).val("");
                return false;
            }
            if(val>max){val=max}
            if(val<1){val=1}
            opt.curPage=val;
            el.initPage(opt);
        })
    }
})(jQuery);

page.css

@charset "utf-8";
/* 表格样式 */
.tbl-h{
    width:100%;
    border-collapse: collapse;
    font-size:12px;
}
.tbl-h thead{
    background-color:#97cf71;
    color:#fff;
}
.tbl-h th,.tbl-h td{
    text-align:center;
    border:1px solid #ddd;
    height:30px;
}
/*分页*/
div.sl-page{
    margin:8px auto;
    color:#333;
    text-align:center;
}
div.sl-page .page-btn{
    display:inline-block;
    padding: 7px 11px;
    border:1px solid #ddd;
    font-size:12px;
    font-family: "宋体";
    font-weight: 700;
    color:#333;
    margin-right: 3px;
    cursor: default;
}
/*省略号*/
div.sl-page p.omit{
    display:inline-block;
}
div.sl-page p.none{
    display:none;
}
div.sl-page .page-btn.dis{
     color:#ddd; 
}
div.sl-page em.page-btn{
    font-style:normal;
}
div.sl-page em.page-btn.cur{
    border: 1px solid #97cf71;
    color: #97cf71;
}
div.sl-page>input{
    width:35px;
    text-align:center;
    padding: 5.7px;
    border:1px solid #ddd;
}

View Code

调用

    $('.sl-page').initPage({
        resKey:{
            pageSize:'pageSize',
            curPage:'pageNo',
            sumPage:'sumNo'
        },
        //pageSize:getMaxRows(),//根据页面高度自行容纳行数                                                                  
        pageSize:10,
        curPage:1,
        ajax:{
            url:url,
            data:{
                devID: devID
            },
            success:function(res){
                res=eval("(" + res + ")");
                initTable(res);//构建表格
            }
        },
    });

效果图