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;
             }