<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>f</title> <meta name="author" content="Administrator" /> <style type="text/css"> div.quotes { padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center } div.quotes a { border-right: #ddd 1px solid; padding-right: 5px; border-top: #ddd 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #ddd 1px solid; color: #aaa; margin-right: 2px; padding-top: 2px; border-bottom: #ddd 1px solid; text-decoration: none } div.quotes a:hover { border-right: #a0a0a0 1px solid; padding-right: 5px; border-top: #a0a0a0 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #a0a0a0 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: #a0a0a0 1px solid } div.quotes a:active { border-right: #a0a0a0 1px solid; padding-right: 5px; border-top: #a0a0a0 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #a0a0a0 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: #a0a0a0 1px solid } div.quotes span.current { border-right: #e0e0e0 1px solid; padding-right: 5px; border-top: #e0e0e0 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #e0e0e0 1px solid; color: #aaa; margin-right: 2px; padding-top: 2px; border-bottom: #e0e0e0 1px solid; background-color: #f0f0f0 } div.quotes span.disabled { border-right: #f3f3f3 1px solid; padding-right: 5px; border-top: #f3f3f3 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #f3f3f3 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #f3f3f3 1px solid } </style> <script type="text/javascript"> function Page(fnc,pageCount,pageLength,start) {//初始化属性 this.fnc = fnc;//对象名称 this.page = start;//当前页数 this.pageCount = pageCount;//总页数 this.argName = 'p';//参数名 this.fpn = '首页';//首页显示名称 this.ppn = '<';//上一页显示名称 this.npn = '>';//下一页显示名称 this.lpn = '尾页';//尾页显示名称 this.pl = pageLength;//每页显示条数 } Page.prototype.checkPages = function() {//进行当前页数和总页数的验证 if(isNaN(parseInt(this.page))) this.page = 1; if(isNaN(parseInt(this.pageCount))) this.pageCount = 1; if(this.page < 1) this.page = 1; if(this.pageCount < 1) this.pageCount = 1; if(this.page > this.pageCount) this.page = this.pageCount; this.page = parseInt(this.page); this.pageCount = parseInt(this.pageCount); } Page.prototype.createHtml = function(mode) {//生成html代码 var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1; strHtml +='<div class="quotes">'; if(prevPage < 1) { strHtml += '<span class="disabled"> '+this.ppn+' </span>'; } else { strHtml += '<a href="javascript:' + this.fnc + '(' + prevPage + ');"> '+this.ppn+' </a>'; } if(this.page != 1) strHtml += '<a href="javascript:' + this.fnc + '(1);">1</a>'; if(this.page >= 5) strHtml += '...'; if(this.pageCount > this.page + 2) { var endPage = this.page + 2; } else { var endPage = this.pageCount; } for(var i = this.page - 2; i <= endPage; i++) { if(i > 0) { if(i == this.page) { strHtml += '<span class="current">'+i+'</span>'; } else { if(i != 1 && i != this.pageCount) { strHtml += '<a href="javascript:' + this.fnc + '(' + i + ');">'+i+'</a>'; } } } } if(this.page + 3 < this.pageCount) strHtml += '...'; if(this.page != this.pageCount) strHtml += '<a href="javascript:' + this.fnc + '(' + this.pageCount + ');">' + this.pageCount + '</a>'; if(nextPage > this.pageCount) { strHtml += '<span class="disabled"> '+this.npn+' </span>'; } else { strHtml += '<a href="javascript:' + this.fnc + '(' + nextPage + ');"> '+this.npn+' </a>'; } strHtml +='</div>'; return strHtml; } Page.prototype.printHtml = function(mode) {//显示html代码 this.checkPages(); return this.createHtml(mode); } </script> </head> <body> <script type="text/javascript"> function topage(p){ alert(p); } var pg = new Page('topage',100,15,67); pg.argName = 'p'; //定义参数名(可选,缺省为page) alert(pg.printHtml()); document.write(pg.printHtml()); //显示页数 </script> </body> </html>
bonext 分页组件
define(['ldfw/core','art'],function(LDFW,template){ var tpl = '<label class="recording_number">共计<span>{{count}}</span>条记录</label>\ <label>\ <select name="" class="ld-select">\ {{each limits as cur}}\ <option value="{{cur}}"{{if limit == cur}} selected{{/if}}>{{cur}}</option>\ {{/each}}\ </select>\ </label>\ <nav>\ <ul class="pagination pagination-sm" >\ <li{{if page<=1}} class="disabled"{{/if}}><a href="javascript:void(0)">«</a></li>\ {{each pages as cur}}\ <li{{if page == cur}} class="active"{{/if}} page="{{cur}}"><a href="javascript:void(0)">{{cur}}</a></li>\ {{/each}}\ <li{{if page>=totalPage}} class="disabled"{{/if}}><a href="javascript:void(0)">»</a></li>\ </ul>\ </nav>'; return LDFW.Component.extend({ events:{ 'click .pagination a':'changePageHandler', 'change .ld-select':'changeLimitHandler' }, initialize:function(){ var bt = this.ldattr('ld-bind-data'); this.sourceField = bt?bt:"pageInfo"; }, updateModel:function(model){ this.model = model; var pageInfo = model.get(this.sourceField); if(pageInfo) { var render = template.compile(tpl); var pages = []; for(var i=pageInfo.page-2;i<=pageInfo.page+2;i++) { if(i>=1 && i<=pageInfo.totalPage) { pages.push(i); } } this.$el.html(render(_.extend({limits:[5,10,20],pages:pages,count:0},pageInfo))); } }, changePageHandler:function(e){ var value = this.getParent().getValue(e.target); var pageInfo = _.clone(this.model.get(this.sourceField)); if(value == '«') { if(pageInfo.page<=1) { return; } pageInfo.page--; } else if(value == '»') { if(pageInfo.page>=pageInfo.totalPage) { return; } pageInfo.page++; } else { pageInfo.page = parseInt(value); } this.$el.find('li[class="active"]').removeClass('active'); this.$el.find('[page="'+pageInfo.page+'"]').addClass('active'); this.model.set(this.sourceField,pageInfo); this.getParent().trigger('changePage',this,pageInfo); if(this['ld-change-handler']){ this['ld-change-handler'].call(this.parent,this,pageInfo); } }, changeLimitHandler:function(e) { var value = this.getParent().getValue(e.target); this.changeLimit(value); }, changeLimit:function(value){ var pageInfo = _.clone(this.model.get(this.sourceField)); pageInfo || (pageInfo = {page:1}); pageInfo.limit = parseInt(value); this.model.set(this.sourceField,pageInfo); this.getParent().trigger('changePage',this,pageInfo); if(this['ld-change-handler']){ this['ld-change-handler'].call(this.parent,this,pageInfo); } } }); });
