使用面向对象的思想编写一款分页插件

需求:

    在前端开发网页的过程中,很多页面都会需要用到列表分页,如果我们使用react,vue等框架,使用组件的方式能很好的将分页的代码封装在一起,从而提高它的复用率.但有时开发一些门户网站需要兼容低版本浏览器比如ie8,就不能使用一些比较现代的框架.但是呢我们还是希望能将分页的逻辑封装在一块,在其他页面也都可以使用.接来下的实现方式是借鉴了一些组件化的编程思想,采用jquery库实现了该插件.

最终效果图:

     

pageing.js(分页的核心js文件)

(function(){

    function Pageing(options){
     
        this.dom = (options.dom instanceof $)?options.dom:$(options.dom);
        this.cur_page = options.cur_page;
        this.final_page = options.final_page;
        this.size = 10;//最多显示10个页码
        this.interval = 4; //将当前页定位到第几个位置
        this.init();
        this.callback = options.callback;
     
    }


    Pageing.prototype.init =function(){
       
       this.render(); 
       this.bindEvent();

    }
     
    /**
     * 
     * 重新加载页码
     */
    Pageing.prototype.reload = function(options){
        this.cur_page = options.cur_page;
        this.final_page = options.final_page;
        this.render();
    }
    
    /**
     * 对页码进行点击事件的绑定
     */
    Pageing.prototype.bindEvent = function(){
       
      var _this =this;

      this.dom.on("click",function(e){

        var target =  e.target || e.srcElement;

        var cur_page = _this.cur_page;

        if($(target).hasClass("number")){
           _this.cur_page = $(target).text()-0;
        }else if($(target).hasClass("first")){
           _this.cur_page = 1;
        }else if($(target).hasClass("last")){
           _this.cur_page = _this.cur_page -1;
           if(_this.cur_page <1){
            _this.cur_page=1;
           }
        }else if($(target).hasClass("next")){
          _this.cur_page = _this.cur_page-0+1;
          if(_this.cur_page>_this.final_page){
            _this.cur_page = _this.final_page;
          }
        }else if($(target).hasClass("end")){
            _this.cur_page = _this.final_page;
        }

        if(_this.cur_page == cur_page){
           return false;
        }

        _this.callback(_this.cur_page);//回调函数

        _this.render();

      })

    }
    
    /**
     * 渲染页面
     */
    Pageing.prototype.render = function(){

        if(this.final_page<=1){
            this.dom.hide();
            return false;
        }else{
            this.dom.show();
        }

        var Numberstr="";
        
        /**
         * 总页码小于或者等于10
         */
        if(this.final_page<=this.size){

            for(var i=1;i<=this.final_page;i++){
                Numberstr+="<div class='number "+((i==this.cur_page)?"current":"")+"'>"+i+"</div>";
            }
              
        }else if(this.cur_page<=this.interval){

            var endpage = this.size;

            for(var i=1;i<=endpage;i++){
                Numberstr+="<div class='number "+((i==this.cur_page)?"current":"")+"'>"+i+"</div>";
            }

        }
        else if((this.cur_page-(this.final_page-this.size))>=this.interval-1){

            for(var i=this.final_page-this.size;i<=this.final_page;i++){
                Numberstr+="<div class='number "+((i==this.cur_page)?"current":"")+"'>"+i+"</div>";
            }

        }else{

            var startPage = this.cur_page-(this.interval-1);

            var endpage = startPage + this.size;

            for(var i=startPage;i<=endpage;i++){
                Numberstr+="<div class='number "+((i==this.cur_page)?"current":"")+"'>"+i+"</div>";
            }

        }

        var Pagestr = '<div class="homepage first">首页</div><div class="ppg last">上一页</div>'+Numberstr+'<div class="ppg next">下一页</div><div class="homepage end">尾页</div>';
        
        var tempStr = $("<div></div>").append(Pagestr);

        tempStr.children("div").show();

        if(this.cur_page == 1){
            tempStr.children(".first").hide();
            tempStr.children(".last").hide();
        }else if(this.cur_page  == this.final_page){
            tempStr.children(".next").hide();
            tempStr.children(".end").hide();
        }
        
        this.dom.html(tempStr.html());
                    
    }

    window.Pageing  = Pageing;


})();

css可以根据项目的需求做调整

.paging {
  position: absolute;
  bottom: 50px;
  right: 0;
  font-size: 14px;
  cursor: pointer;
  color: #333;
}
.paging .homepage {
  float: left;
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #CBCBCB;
  border-radius: 3px;
}
.paging .ppg {
  float: left;
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #CBCBCB;
  border-radius: 3px;
}
.paging .number {
  float: left;
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #CBCBCB;
  border-radius: 3px;
}
.paging div:hover {
  border: 1px solid #e60012;
}
.paging .current {
  background-color: #e60012;
  border: 1px solid #e60012;
  color: #fff;
}

html

  <div class="paging clean" id="page">             
            </div>   

具体使用:

 var page = new Pageing({
        dom:$("#page"),
        cur_page:1,
        final_page:100,
        callback:function(cur_page){
         console.log(cur_page);
        }
    })

需要传递几个参数:

扫描二维码关注公众号，回复： 8518494 查看本文章

    dom:就是你需要展示页码的dom主体,可以使用jquery对象也可以使用普通的dom对象

    cur_page:当前页

    final_page:最后一页

    callback:当用户点击页码或旁边的按钮时(上一页,下一页之类)触发的回调函数,会将点击的页码返回

分析:

1.首先请求后端列表数据,获取到数据的总页数作为final_page的值,初始化时cur_page可以取为1,填写好展现页码的dom,将以上三个值作为参数可以new一个page对象.每次用户点击页码会触发callback回调,callback里面可以填写获取数据的逻辑已达到用户点击了页码页面的列表数据也相应变化的效果.如果需要对分页插件重新加载,可以使用reload方法:

             page.reload({cur_page:cur_page,final_page:final_page});

2.该插件最核心的部分是生成页码的那一部分代码,规定页码最多显示10个,规定当前页在数据超量的情况下显示在第四个位置因此设置interval=4,可以分为四种情况来生成页码:

    2.1   总页数小于或等于10,那么将1作为首页,总页数作为尾页即可

    2.2  当前页小于或等于interval,此种情况1作为首页,10作为尾页

    2.3  当前页位于倒数那几页的情况,起始页取倒数第10页的值,总页数作为尾页

    2.4 此种情况就是当前页位于页码的第四个位置,利用当前页可以计算出首页和尾页