分页1 - 前端 ol.pager

最新推荐文章于 2025-09-12 14:03:36 发布

转载最新推荐文章于 2025-09-12 14:03:36 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/wrean/blog/139238

文章标签：

#前端 #javascript #ViewUI

为什么80%的码农都做不了架构师？>>>

1.js-api:

ol.loader.mods["ol.pager"] = [
	"jquery",
	{uri: "../ol.pager/pager.js",type:"js",	charset: "utf-8",depend:true},
	{uri: "../ol.pager/pager.css",type:"css",	charset: "utf-8"}
];

2.pager.js

必须传入的参数：

1.pageNumber

2.pageCount

3.totalRecord

4.pageSize

由pageNumber+pageSize能算出RS的移向

/**
 * pager.js
 * @update		2010-11-3
 * @version		0.2
 */
(function($) {
	var isNumeric=function(str){
		var re=/^\d*$/;
		return re.test(str);
	};
	$.fn.pager=function(options) {
			function renderPager(options, obj) {
				this.render = function() {
					if (options.pageNumber > options.pageCount) {
						//自动跳到第一页
						//this.callBack(1);
						return;
					}
					var $pager = $('<ul></ul>');
					var _item=options.item;
					for(var i=0;i<_item.length;i++)
					{
						$pager.append(this.handler(_item[i]));
					}
					return $pager;
				}
				//render end  构建样式
				this.handler=function(label){

					switch(label)
					{
						case "recordCount":
							var text=options.text["recordCount"];
							text=text.replace(/{#recordCount}/g,options.recordCount);
							return $('<li class="recordCount">' +text + '</li>');
						case "first":
						case "pre":
						case "next":
						case "last":
							return this.renderButton(label);
						case "pageCount":
							var text=options.text["pageCount"];
							text=text.replace(/{#pageCount}/g,options.pageCount);
							return $('<li class="pageCount">' +text + '</li>');
						case "qpage":
							return this.renderQPages();
						case "pageSizer":
							return this.renderPageSizer();
						case "quickPager":
							return this.renderQuickPager();
						default:
							return '<li class="text">'+label+'</li>';

					}
				}
				this.renderButton = function(buttonLabel) {
					var destPage = 1;
					var buttonText=options.text[buttonLabel];
					switch (buttonLabel) {
					case "first":
						destPage = 1;
						break;
					case "pre":
						destPage = options.pageNumber - 1;
						break;
					case "next":
						destPage = options.pageNumber + 1;
						break;
					case "last":
						destPage = options.pageCount;
						break;
					case "pageCount":
						destPage = options.pageCount;
						break;
					}
					var exp=new RegExp('{#'+buttonLabel+'}',"gi");
					buttonText=buttonText.replace(exp,destPage);

					var $Button = $('<li class="pgNext link '+buttonLabel+'">' + buttonText + '</li>');
					if (buttonLabel == "first" || buttonLabel == "pre") {
						options.pageNumber <= 1 ? $Button.addClass(buttonLabel+'-empty') : $Button.bind("click", {E: this},
						function(v) {
							v.data.E.callBack(destPage);
						});
					} else {
						options.pageNumber >= options.pageCount ? $Button.addClass(buttonLabel+'-empty') : $Button.bind("click", {E: this},
						function(v) {
							v.data.E.callBack(destPage);
						});
					}
					return $Button;
				}
				//renderButton end

				this.renderQPages = function() {
					var text=options.text["qpage"];
					var container=$("<span class='qpages'></span>");
					var startPoint = 1;
					var endPoint = options.qpageSize;
					var tmp=parseInt(endPoint/2);
					if (options.pageNumber > tmp) {
						startPoint = options.pageNumber - tmp;
						endPoint = options.pageNumber + tmp;
					}
					if (endPoint > options.pageCount) {
						startPoint = options.pageCount -tmp*2;
						endPoint = options.pageCount;
					}
					if (startPoint < 1) {
						startPoint = 1;
					} // loop thru visible pages and render buttons
					for (var page = startPoint; page <= endPoint; page++) {
						var currentButton = $('<li class="page-number link">' + text.replace(/{#qpage}/g,page) + '</li>');
						page == options.pageNumber ? currentButton.addClass('pgCurrent') : currentButton.bind("click", {
							E: this
						},
						function(v) {
							v.data.E.callBack(this.firstChild.data);
						});
						currentButton.appendTo(container);
					}
					if(options.pageCount>options.qpageSize)
					{
						container.append('<li class="text">...</li>');
						var $Button = $('<li class="page-number link page-number-last">' + text.replace(/{#qpage}/g,options.pageCount) + '</li>');
						options.pageNumber >= options.pageCount ? $Button.addClass('pgEmpty') : $Button.bind("click", {E: this},
						function(v) {
							v.data.E.callBack(options.pageCount);
						});
						container.append($Button);
					}
					return container;
				} //renderQPages end

				this.renderQuickPager = function() {
					if(options.pageCount<=1)return null;
					var input=null;
					var t1 = $('<li class="text quickPager"></li>');
					if (options.pageCount <= 1) {//统一样式
						var html = '<select>';
						for (var i = 1; i <= options.pageCount; i++) {
							html += '<option value="' + i + '"';
							if (i == options.pageNumber) {
								html += ' selected';
							}
							html += '>' + i + '</option>';
						}
						html += '</select>';
						input = $(html);
						input.bind("change", {
							E: this
						},
						function(v) {
							v.data.E.callBack($(this).attr("value"));
						});
					} else {
						input = $('<span class="fl">第</span><div id="chatpage"><input id="quickPager" class="pagenum fl" value="' + options.pageNumber + '" style="width:'+(options.pageNumber.toString().length+1)*10+'px;"><a id="enter" class="enter fl" href="javascript:void(0)"></a></div><span class="fl">&nbsp;/' + options.pageCount + '&nbsp;页</span>');
						input.find("#quickPager").bind("keypress", {E: this},function(e) {
							var E = e.data.E;
							if (e.keyCode == 13) {
								var p = $(this).attr("value");
								if (!isNumeric(p)) {
									alert("请输入数字！");
									return false;
								}
								if (parseInt(p) > options.pageCount) {
									alert("最大页数为" + options.pageCount + "！");
									return false;
								}
								E.callBack(p);
								return false;
							}
						});
						input.find("a#enter").bind("click", {E:this},function(e) {
							var E=e.data.E;
							var p = input.find("#quickPager").attr("value");
							if (!isNumeric(p)) {
								alert("请输入数字！");
								return false;
							}
							if (parseInt(p) > options.pageCount) {
								alert("最大页数为" + options.pageCount + "！");
								return false;
							}
							E.callBack(p);
							return false;
						});
					}
					t1.append(input);
					return t1;
				}
				//renderQuickPage end

				this.renderPageSizer = function() {

					var t1;
					if (options.rowList) {
						var text=options.text["pageSizer"];
						text=text.replace(/{#pageSizer}/g,'</span><div id="select" class="fl"></div><span class="fl">');
						t1 = $('<li class="text pageSizer"><span class="fl">'+text+'</span></li>');
						var rowListHtml = '<select name="pageSize">';
						for (var i = 0; i < options.rowList.length; i++) {
							rowListHtml += '<option value="' + options.rowList[i] + '"';
							if (options.rowList[i] == options.pageSize) {
								rowListHtml += ' selected';
							}
							rowListHtml += '>' + options.rowList[i] + '</option>';
						}
						rowListHtml += "</select>";
						var input2 = $(rowListHtml);
						input2.bind("change", {
							E: this
						},
						function(v) {
							if(options.pageSize==this.value)return;
							options.pageSize=this.value;
							v.data.E.callBack(options.pageNumber);
						});
						$("#select", t1).append(input2);
					}
					return t1;
				}
				//renderPageSizer end
				this.callBack = function(page) {
					if(typeof(page)!="number")page=parseInt(page);
					if (page) options.pageNumber = page;
					if (typeof(options.callBack) == "function") options.callBack(options);
				}

				obj.empty().append(this.render());
			}
			//renderPager end*/


			var _default = {
				pageNumber: 1,//当前页码
				pageCount: 1,//页数
				pageSize:null,//页面记录
				recordCount:0,//总记录条数
				qpageSize:9,//页面显示几个快速到达
				rowList:null,//分页大小数组
				text:{//显示文字
						recordCount:"总数目:{#recordCount}",
						first:"首页",
						pre:"上一页",
						qpage:"{#qpage}",
						pageCount:"{#pageCount}",
						next:"下一页",
						last:"末页",
						pageSizer:'每页{#pageSizer}/行'
					},
				item:["recordCount","first","pre","qpage","next","quickPager"]//显示样式
			};
			options.text  = $.extend({}, _default.text, options.text);
			options  = $.extend({}, _default, options);
			return this.each(function() {
				new renderPager(options, $(this));
			});
		}
})(jQuery);

3.css

.pager{ margin: 30px 0 10px;display:block;font-family:Verdana,Tahoma,Arial, Helvetica, sans-serif;overflow:hidden;display:inline-block;zoom:1;*display:inline; text-align:center;width:100%;}
.pager img,.pager input,.pager span,.pager select{vertical-align:middle;}
.pager .pageSizer span,.pager .quickPager span{font-family:tahoma;}
.pager ul{display:inline-block;border:none;text-transform:uppercase;font-size:10px;padding:0;}
.pager ul li{font-size: 9pt;list-style:none;float:left;	border:1px solid #ccc;text-decoration:none;margin:0 5px 0 0;padding:0 5px 0 5px;line-height:21px;}
.pager ul li.link {background:#fff;cursor:pointer;}
.pager ul li.link:hover {border:1px solid #790606;}
.pager ul li.pgCurrent {background: #9b0f0f;color: #fff;border: solid 1px #790606;}
.pager ul li.text{border:none;padding:0px;clear:right;}
.pager ul li.text #chatpage{margin-top:1px;	border:1px solid #809EBA;float:left;overflow:hidden;padding-right:1px;height:18px;}
.pager ul li.text #chatpage input{text-align:center;height:20px;}
.pager ul li.text #chatpage .pagenum{border:0 none;	margin-left:1px;padding:0;line-height:14px;}
.pager ul li.text #chatpage .enter{background:transparent url(pagenum.gif) no-repeat scroll 0 0;background-position:-27px -66px;border:medium none;	cursor:pointer;	height:15px;margin:1px 0 1px 1px;width:18px;display:block;}
.pager ul li.first-empty:hover,
.pager ul li.pre-empty:hover,
.pager ul li.next-empty:hover,
.pager ul li.last-empty:hover{border:1px solid #CCCCCC;}
.pager ul li.first-empty,
.pager ul li.pre-empty,
.pager ul li.next-empty,
.pager ul li.last-empty{cursor:auto;color:#ADADAD;}

/*style1*/
.pager.style1 ul li{margin:0 3px 0 0;}
.pager.style1 ul li.page-number{border:none;padding:0 7px;}
.pager.style1 ul li.page-number.pgCurrent{background:#F97C05;}
.pager.style1 ul li.pgNext{text-decoration:none;padding:0px;border:none;background:transparent url(pagenum2.gif) no-repeat scroll left center;width:50px;height:21px;}
.pager.style1 ul li.pgNext.first,.pager.style1 ul li.last{width:45px;}
.pager.style1 ul li.first{background-position:-9px -23px;}
.pager.style1 ul li.first-empty{background-position:-9px -55px;}
.pager.style1 ul li.pre{background-position:-9px -161px;}
.pager.style1 ul li.pre-empty{background-position:-9px -202px;}
.pager.style1 ul li.next{background-position:-9px -237px;}
.pager.style1 ul li.next-empty{background-position:-9px -272px;}
.pager.style1 ul li.last{background-position:-9px -88px;}
.pager.style1 ul li.last-empty{background-position:-9px -119px;}
.pager.style1 ul li.text #chatpage{margin:0px;border:1px solid #F97C05;float:left;overflow:hidden;padding:1px;height:15px;line-height:15px;}
.pager.style1 ul li.text #chatpage .pagenum{vertical-align:top;border:0 none;padding-left:2px;font-size:12px;height:15px;line-height:15px;}
.pager.style1 ul li.text #chatpage .enter{background:transparent url(pagenum2.gif) no-repeat scroll 0 0;background-position:-12px -310px;border:medium none;cursor:pointer;height:15px;margin:0px;width:18px;display:block;}

/*style2*/
.pager.style2 ul li{margin:0 3px 0 0;}
.pager.style2 ul li.page-number{border:none;padding:0 7px;}
.pager.style2 ul li.page-number.pgCurrent{background:#F97C05;}
.pager.style2 ul li.pgNext{text-decoration:none;padding:0px;border:none;background:transparent url(pagenum2.gif) no-repeat;width:50px;height:21px;}
.pager.style2 ul li.pgNext.first,.pager.style1 ul li.last{width:45px;}
.pager.style2 ul li.first{background-position:-9px -23px;}
.pager.style2 ul li.first-empty{background-position:-9px -55px;}
.pager.style2 ul li.pre{background-position:-9px -161px;}
.pager.style2 ul li.pre-empty{background-position:-9px -202px;}
.pager.style2 ul li.next{background-position:-9px -237px;}
.pager.style2 ul li.next-empty{background-position:-9px -272px;}
.pager.style2 ul li.last{background-position:-9px -88px;}
.pager.style2 ul li.last-empty{background-position:-9px -119px;}
.pager.style2 ul li.text #chatpage{margin:0px;border:1px solid #F97C05;float:left;overflow:hidden;padding:1px;height:15px;line-height:15px;}
.pager.style2 ul li.text #chatpage .pagenum{vertical-align:top;border:0 none;padding-left:2px;font-size:12px;height:15px;line-height:15px;}
.pager.style2 ul li.text #chatpage .enter{background:transparent url(pagenum2.gif) no-repeat scroll 0 0;background-position:-12px -310px;border:medium none;cursor:pointer;height:15px;margin:0px;width:18px;display:block;}
.pager.style2 .quickPager{margin-left:5px;}
.pager.style2 span.qpages li.text{display:none;}
.pager.style2 span.qpages li.text{display:none;}
.pager.style2 ul li.page-number-last{display:none;}

/*style3*/
.pager.style3 ul li{margin:0 3px 0 0;}
.pager.style3 ul li.link:hover {border:1px solid #F97C05;}
.pager.style3 ul li.pgNext{text-decoration:none;padding:0px;background:#fff url(pagenum2.gif) no-repeat;width:50px;height:21px;}
.pager.style3 ul li.pre{width:18px;background-position:-5px -405px;}
.pager.style3 ul li.pre-empty{background-position:-5px -463px;}
.pager.style3 ul li.next{background-position:-9px -237px;}
.pager.style3 ul li.next-empty{background-position:-9px -272px;}
.pager.style3 ul li.recordCount{border:none;}
.pager.style3 ul li.first-empty:hover,
.pager.style3 ul li.pre-empty:hover,
.pager.style3 ul li.next-empty:hover,
.pager.style3 ul li.last-empty:hover{border:1px solid #CCCCCC;}

/*2012-10-12*/
.pager_box{margin-top: 15px; text-align: center;}

转载于:https://my.oschina.net/wrean/blog/139238