基于avalon+jquery做的bootstrap分页控件

刚开始学习avalon，项目需要就尝试写了个分页控件Pager.js；基于BootStrap样式这个大家都很熟悉

在这里推荐下国产前端神器avalon；确实好用，帮我解决了很多前端问题。

不多说了，代码贴上：

 /**
  * options.id avalon 所需要的$id
  * options.total 总记录数
  * options.rows 行数
  * options.callback
  */
 var Pager=function(options){
     var _this=this;
     _this.callback=options.callback||function(){};
     _this.model=avalon.define({
         $id:options.id,
         currentPage:3,
         rows:10,
         totalRecord:100,
         totalPage:10,
         list:[],
         liPageNums:3,
         init:function(options){//初始化
             _this.model.reset(options);
             _this.model.currentPage=1;

         },
         jump:function(page){//界面跳转
             _this.callback.call(_this,page,_this.model.rows);
             _this.model.currentPage=page;
             _this.model.refresh();
             //alert(page);
         },
         prev:function(){
             if(_this.model.currentPage-1<1)return;
             _this.model.jump(_this.model.currentPage-1);
         },
         next:function(){
             if(_this.model.currentPage+1>_this.model.totalPage)return;
             _this.model.jump(_this.model.currentPage+1);
         },
         refresh:function(){//刷新分页工具栏，计算显示内容
             _this.model.list=[];
             var ll=new Array();
             var cp=_this.model.currentPage;
             for(var i=_this.model.liPageNums;i>0;i--){
                 ll.push(cp-i);
             }
             ll.push(cp);
             for(var i=1;i<=_this.model.liPageNums;i++){
                 ll.push(cp+i);
             }
             while(ll[0]<1){
                 for(var i=0;i<ll.length;i++){
                     ll[i]=ll[i]+1;
                 }
             }
             while(ll[ll.length-1]>_this.model.totalPage){
                 for(var i=0;i<ll.length;i++){
                     ll[i]=ll[i]-1;
                 }
             }
             for(var i=0;i<ll.length;i++){
                 if(ll[i]>=1&&ll[i]<=_this.model.totalPage){
                     _this.model.list.push(ll[i]);
                 }
             }
         },
         /**
          * options.total 总记录数
          * options.rows 每页记录数
          */
         reset:function(options){//数据加载后可按需要重置
             _this.model.rows=options.rows||_this.model.rows;
             _this.model.totalRecord=options.total||0;
             _this.model.totalPage=_this.model.totalRecord%_this.model.rows==0?_this.model.totalRecord/_this.model.rows:parseInt(_this.model.totalRecord/_this.model.rows+1);
             _this.model.refresh();
         }
     });
     _this.getModel=function(){return _this.model;};
     _this.model.init(options);
 };

HTML

 <div class="col-md-12">
            <div class="m-page-footer" ms-controller="footer">
             <table width="100%">
                 <tr>
                 <td>
                     <div class="pages_info pull-left">显示 {{(currentPage-1)*rows+1}} 到 {{currentPage*rows>totalRecord?totalRecord:currentPage*rows}} 项，共 {{totalRecord}} 项 </div>
                 </td>
                 <td style="text-align:right;">
                     <div class="dataTables_paginate paging_simple_numbers pages_num">
                         <ul class="pagination" style="margin:0;">
                             <li class="paginate_button previous" ms-class="disabled:currentPage<=1" aria-controls="editable" tabindex="0" id="editable_previous"><a href="javascript:;" ms-click="prev">上一页</a></li>
                             <li class="paginate_button " aria-controls="editable" tabindex="0" ms-repeat="list" ms-class="active:el==currentPage"><a href="javascript:;" ms-click="jump(el)">{{el}}</a></li>
                             <li class="paginate_button next" ms-class="disabled:currentPage>=totalPage" aria-controls="editable" tabindex="0" id="editable_next"><a href="javascript:;" ms-click="next">下一页</a></li>
                         </ul>
                     </div>
                 </td>
                 </tr>
             </table>
         </div>
   </div>

调用代码,callbakl回调指向列表刷新方法reloadGrid，function reloadGrid(page,rows)

    var pager=new Pager({id:"footer",rows:20,callback:reloadGrid});

     $.post("e",params,function(json){
            model.list=json.rows;
            pager.getModel().reset({total:json.total});

        },"json");    

最终效果：