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