基于avalon+jquery做的bootstrap分页控件-白红宇

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

阅读量：5168 次

发布时间：2019-06-13

本文共 3268 字，大约阅读时间需要 10 分钟。

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

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

不多说了，代码贴上：

1 /** 2  * options.id avalon 所需要的$id 3  * options.total 总记录数 4  * options.rows 行数 5  * options.callback 6  */ 7 var Pager=function(options){ 8     var _this=this; 9     _this.callback=options.callback||function(){};10     _this.model=avalon.define({11         $id:options.id,12         currentPage:3,13         rows:10,14         totalRecord:100,15         totalPage:10,16         list:[],17         liPageNums:3,18         init:function(options){//初始化19             _this.model.reset(options);20             _this.model.currentPage=1;21             22         },23         jump:function(page){//界面跳转24             _this.callback.call(_this,page,_this.model.rows);25             _this.model.currentPage=page;26             _this.model.refresh();27             //alert(page);28         },29         prev:function(){30             if(_this.model.currentPage-1<1)return;31             _this.model.jump(_this.model.currentPage-1);32         },33         next:function(){34             if(_this.model.currentPage+1>_this.model.totalPage)return;35             _this.model.jump(_this.model.currentPage+1);36         },37         refresh:function(){//刷新分页工具栏，计算显示内容38             _this.model.list=[];39             var ll=new Array();40             var cp=_this.model.currentPage;41             for(var i=_this.model.liPageNums;i>0;i--){42                 ll.push(cp-i);43             }44             ll.push(cp);45             for(var i=1;i<=_this.model.liPageNums;i++){46                 ll.push(cp+i);47             }48             while(ll[0]<1){49                 for(var i=0;i
     
      _this.model.totalPage){54                 for(var i=0;i
      
       =1&&ll[i]<=_this.model.totalPage){60                     _this.model.list.push(ll[i]);61                 }62             }63         },64         /**65          * options.total 总记录数66          * options.rows 每页记录数67          */68         reset:function(options){//数据加载后可按需要重置69             _this.model.rows=options.rows||_this.model.rows;70             _this.model.totalRecord=options.total||0;71             _this.model.totalPage=_this.model.totalRecord%_this.model.rows==0?_this.model.totalRecord/_this.model.rows:parseInt(_this.model.totalRecord/_this.model.rows+1);72             _this.model.refresh();73         }74     });75     _this.getModel=function(){
   return _this.model;};76     _this.model.init(options);77 };

HTML

1 
     
       2            
      
        3             
       
         4                 
           5                 
 8                 
17                 
18             
                            6 
           
            显示 { {(currentPage-1)*rows+1}} 到 { {currentPage*rows>totalRecord?totalRecord:currentPage*rows}} 项，共 { {totalRecord}} 项 
           
 7            9 
           
            10 
            
             11 
             上一页
12 
             { {el}}
13 
             下一页
14 
            
15 
           
16          
        
       
19         
      
20

调用代码,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");

最终效果：