一个小小的分页组件化

闲来无事，于是浏览之前的代码，发觉一个分页的组件写的还不够模块化，于是就有了重构分页组件的想法，废话不多说了，直接上图，翻页是这样子滴。

需求是这样的：表格数据格式是json 的，表格在上面，翻页在下面。

对应建立一个html片段，代码直接贴出来

<div class="pageWrapper">
        <input type="hidden" name="page.totalPages" value="59" id="searchForm_page_totalPages">
        <input type="hidden" name="page.orderBy" value="" id="searchForm_page_totalCount">
        <input type="hidden" name="url" value="" id="searchForm_page_pageUrl">
        <ul class="pagination">
            <li class="disabled"><a class="info">第<em class="curpage">1</em>/<em class="totalpage"></em>页,共<em class="totalcount"></em>条记录</a></li>
            <li><a href="" class="index">首页</a></li>
            <li><a href="" class="prev">上一页</a></li>
            <li><a href="" class="next">下一页</a></li>
            <li><a href="" class="last">末页</a></li>
            <li class="disabled">
                <a class="info">
                    每页
                    <select name="page.pageSize" id="select_page_pageSize">

                        <option value="15"  selected>15</option>
                        <option value="20">20</option>
                        <option value="25">25</option>
                        <option value="30">30</option>
                    </select>
                    条
                    <input type="text" name="page.pageNo" value="2" id="searchForm_jumppage_pageNo" style="width:30px" class="intNo" οnkeyup="if(isNaN(this.value)||(this.value<1)) this.value='1';">
                </a>
            </li>
            <li><a class="func" href="#">跳转</a></li>
        </ul>
    </div>

组件化的第一步骤就是生成类，生成类的方法大致有三种，工厂模式，构造函数模式，原型模式以及组合模式。我这里用的是组合模式，即属性挂在构造函数内，方法挂在原型方法上。

定义一个Page类

var Page = function(){
  this.options = {
       total : $("#searchForm_page_totalPages")?$("#searchForm_page_totalPages").val():'',
       current : '',
       count : $("#searchForm_page_totalCount")?$("#searchForm_page_totalCount").val():'',
       actionUrl : $("#searchForm_page_pageUrl")?$("#searchForm_page_pageUrl").val():'',
       default : 15,
       container : '',
       index : 1
  };
   this.init.apply(this,arguments);
};

在原型对象上挂载方法

Page.prototype = {
   init : function(wrap){//初始化操作，注册事件
       var that = this;
       if(wrap.nodeType ==1){
           that.container = wrap;
       }
       that.options.current =1;
       $(".index").on('click',that.index);
       $(".next").on('click',that.next);
       $(".prev").on('click',that.prev);
       $(".last").on('click',that.last);
       that.initStatus();
   },
   initStatus : function(){
        //首页 变灰 第一页变灰
       $(".index").parent().addClass("disabled");
       $(".prev").parent().addClass("disabled");
   },
   checkStatus : function(){
       var that = this;
       var curpage = that.options.current;
       var totalpage = that.options.total;
       //如果只有一页
       if(totalpage==1){
           //首页 上一页 下一页 末页全变灰
           $(".index").parent().addClass("disabled");
           $(".prev").parent().addClass("disabled");
           $(".next").parent().addClass("disabled");
           $(".last").parent().addClass("disabled");
       }
       else{//有多页的情况
           if(curpage==1){
               //如果是第一页 首页变灰 上一页变灰
               that.initStatus();
           }
           else if(curpage==totalpage){
               //如果是最后一页，末页变灰 下一页变灰
               $(".next").parent().addClass("disabled");
               $(".last").parent().addClass("disabled");
           }
           else{
               //如果是中间页 全部不变灰
           }
       }
   },
   index : function(){
       var that = this;
       that.jump(1);
   },
   last : function(){
       var that = this;
       var lastpage = this.total;
       that.jump(lastpage);
   },
   prev : function(){
       var that = this;
       var curpage = that.options.current;
       var totalpage = that.options.total;
       var index = that.options.index;
       if(curpage>index){
           that.jump(curpage-1);
       }
   },
   next : function(){
       var that = this;
       var curpage = that.options.current;
       var totalpage = that.options.total;
       var index = that.options.index;
       if(curpage<totalpage){
           that.jump(curpage+1);
       }
   },
   jump : function(num){
       var that = this;
       that.options.current = num;
       var totalpage = that.options.total;
       //跳到后，检查状态
       //跳到最后一页后，检查状态
       that.checkStatus();
       var pagesize = that.default;
       var url = that.actionUrl;
       that.operate(url,num,pagesize,function(){
           //跳转成功后，拿到json数据，第一：调用生成表格类，回填数据
           //第二：设总页数
           //第三：设当前页
           //第四：检查状态
       });

   },
   operate : function(url,num,pagesize,callback){//发送ajax请求，请求对应页码
       var actionUrl = url+"&p="+num+"&pagesize="+pagesize;
       $.ajax({
            url : actionUrl,
            success : function(data){
                  callback();
            },
            error : function(){

            }
       });
   }

使用的时候，new一个Page对象就好啦，

 new Page($("table tbody"));