基於avalon+jquery作的bootstrap分頁控件

剛開始學習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<ll.length;i++){
50                     ll[i]=ll[i]+1;
51                 }
52             }
53             while(ll[ll.length-1]>_this.model.totalPage){
54                 for(var i=0;i<ll.length;i++){
55                     ll[i]=ll[i]-1;
56                 }
57             }
58             for(var i=0;i<ll.length;i++){
59                 if(ll[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 <div class="col-md-12">
 2            <div class="m-page-footer" ms-controller="footer">
 3             <table width="100%">
 4                 <tr>
 5                 <td>
 6                     <div class="pages_info pull-left">顯示 {{(currentPage-1)*rows+1}} 到 {{currentPage*rows>totalRecord?totalRecord:currentPage*rows}} 項，共 {{totalRecord}} 項 </div>
 7                 </td>
 8                 <td style="text-align:right;">
 9                     <div class="dataTables_paginate paging_simple_numbers pages_num">
10                         <ul class="pagination" style="margin:0;">
11                             <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>
12                             <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>
13                             <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>
14                         </ul>
15                     </div>
16                 </td>
17                 </tr>
18             </table>
19         </div>
20   </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");    

 

最終效果：