刚开始学习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");
最终效果: