jquery自定义分页插件(带回调函数)

插件js:

(function($){
    $.fn.extend({
        pageination:function(options ){
            //面向对象的写法
         new page(this,options);
        }
        
    })
    var page=function(ele,options){
        if(options==null)
        alert("arg error")
        this.element=ele;
        this.options={
            pageIndex:1,
            pageSize:20,
            pageCount:15,
            callback:function(){}
        };
        this.options=$.extend({},this.options,options);
        this.init();
    }
    //初始化对象
    page.prototype={
        init:function(){
            //初始化
        this.createHtml();
        this.bindEvent();
        },
        createHtml:function(){
            var that=this;
            var content="";
            var pageCount=that.options.pageCount;
            var pageIndex=that.options.pageIndex;
            var pageSize=that.options.pageSize;
            
            content += "<a id=\"firstPage\" class='text'>首页</a><a id='prePage' class='text'>上一页</a>";
            //总页数小于6
            if(pageCount<6){
                for(var i=1; i<pageCount+1;i++){
                    if(pageIndex==i)
                    content+="<a class='current'>"+i+"</a> ";
                    else
                    content+="<a class='other'>"+i+"</a> ";
                }
                
            }else{//总页数大于6
                if(pageIndex<4){
                    for(var i=1; i<5;i++){
                    if(pageIndex==i)
                    content+="<a class='current'>"+i+"</a> ";
                    else
                    content+="<a class='other'>"+i+"</a> ";
                    }
                    content += ". . .";
                    content += "<a class='other'>"+pageCount+"</a>";
                }
                else if(pageIndex>pageCount-4){
                    content += "<a class='other'>1</a>";
                    content += ". . .";
                    for(var i=pageCount-4; i<pageCount+1;i++){
                      if(pageIndex==i)
                      content+="<a class='current'>"+i+"</a> ";
                      else
                      content+="<a class='other'>"+i+"</a> ";
                    }
                }
                else{
                
                    content += "<a class='other'>1</a>";
                    content += ". . .";
                    for(var i=pageIndex-2; i< parseInt(pageIndex)+3;i++){
                      if(pageIndex==i)
                      content+="<a class='current'>"+i+"</a> ";
                      else
                      content+="<a class='other'>"+i+"</a> ";
                    }
                    content += ". . .";
                    content += "<a class='other'>"+pageCount+"</a>";
                }
                
            }
            //结尾工作
            content += "<a id='nextPage'  class='text'>下一页</a>";
            content += "<a id=\"lastPage\"  class='text' >尾页</a>";
            content += "<span class='totalPages'> 共<span>"+pageCount+"</span>页 </span>";
            content += "<span class='totalSize'> 共<span>"+pageSize+"</span>条记录 </span>";
            that.element.html(content);
            
        },
        bindEvent:function(){ 
            var that=this;
            that.element .on('click','a',function(){
                var index=$(this).html();
                var current=that.options.pageIndex;
                var id=$(this).attr("id");
                if(id=="nextPage"){
                    current++;
                    if(current>that.options.pageCount){
                        current=that.options.pageCount;
                    }
                }
                else if(id=="lastPage"){
                    current=that.options.pageCount;
                }
                else if(id=="firstPage"){
                    current=1;        
                }
                else if(id=="prePage"){
                    current-=1;
                    if(current<0){
                        current=1;
                    }
                }else{
                    current=index;
                }
                that.options.pageIndex=current;
                that.createHtml();
                
                //回调函数
                if(that.options.callback){
                    that.options.callback($(this));
                }
            })
        }
        
    }
    
})(window.jQuery);

 

 

前台样式:

<style>
            
            #page a.current{
                 background-color: #0073A9;
                border-color: #0073A9;
                color: #FFFFFF;
            }
            #page a{
                min-width: 30px;
                height: 28px;
                border: 1px solid #dce0e0!important;
                text-align: center;
                margin: 0 4px;
                cursor: pointer;
                line-height: 28px;
                color: #666666;
                font-size: 13px;
                display: inline-block;

            }
            #page span span{
                color:#0073A9;
                margin: 0,5px;
            }
            #page .text{
                color:#0073A9;
            }
        </style>
主页面代码:

<div id="page"></div>

调用代码:

<script type="text/javascript"    >
    
     $("#page").pageination({
              pageCount: 10,
              pageSize: 300,
              callback: function(ele) {
                      //alert(ele.html())
                       } 
           } );
        
</script>

效果:

值得注意的是

1.引入js前 需要提前引入 jquery js文件

2.由于样式重叠 在写前台样式的时候 需要对使用到的标签的选择器写的更具体

如:

 #page a.current{
                 background-color: #0073A9;
                 border-color: #0073A9;
                 color: #FFFFFF;
             }