学步园

首先介绍下访问者模式，简单的说就是我们有一系列数据，不同访问者对其有不同的操作，但是不可改变其数据。

应用于分页情况是我们通过记录总数，每页记录行数，当期页码等等数据来显示html效果，数据都是一样的，但是显示效果却需求不同。

我们先来计算数据：

var SplitPage=function(allcount,onePagecount,currPage,styleShowNum){
				/**
				 * 记录总数
				 */
				this.allcount=allcount;
				/**
				 * 每一页记录数
				 */
				this.onePagecount=onePagecount;
				/**
				 * 目前页码
				 */
				this.currPage=currPage;
				/**
				 * 一行显示几个
				 */
				this.styleShowNum=styleShowNum;

				/**
				 * 分成页数
				 */
				this.pageNum=0;
				
				this.left=0;
				this.right=0;				
				this.showHTML=function(pstyle) {
					// <a href='a.do?p=1' class='curr'>1</a>,2,3,4,5,6,7,8
					this.getlimit();
					return pstyle.genHtml(allcount,left, right, currPage,pageNum,onePagecount);
				}

				this.getlimit=function(){

					//计算分成多少页
					pageNum= Math.ceil(allcount / onePagecount) ;
					
					var half=Math.round(styleShowNum / 2);
					 //左右边界固定
			        if (pageNum <= styleShowNum)
			        {
			            left = 1;
			            right = pageNum;
			        }//右边界固定
			        else if (currPage >= pageNum - half)
			        {
			            left = pageNum - styleShowNum + 1;
			            right = pageNum;
			        }//左边界固定
			        else if (currPage <= half)
			        {
			            left = 1;
			            right = styleShowNum;
			        }//左右边界都不固定
			        else
			        {
			            left = currPage - half+1;
			            right = currPage + Math.floor(styleShowNum/2);    
			        }
				}				
		}
   

例如：我们页面上出现8个点，1，2，3，4，5，6，7，8。

当点击1，2，3，4都无需变化。start=1，end=8，左端是固定的

点击5时，需变成2，3，4，5，6，7，8，9。start=2，end=9，两端都不固定

如果只有10页，3，4，5，6，7，8，9，10。点击7,8,9,10都无需变化。start=3，end=10，右端是固定的。

所以如果服务器端传来参数是当前页p，我们就可以计算出起点和终点然后循环显示出一系列页码。

注：8是双数，当为单数时，更容易，当前页的左右两端相等，例如1，2，3，4，5。

计算完了数据，接下来该如何显示了

function pageGo(p){
			window.location="/computers?p="+p;
		}

		var PageStyleA =function() {

			this.genHtml=function(allcount,start,end,cur,pageNum,onePagecount) {
				
				sb = "<span>显示第"+((cur-1)*onePagecount+1)+" - "+cur*onePagecount+"条记录（共"+allcount+
				"条记录）<a href=\"#\" onclick=\"pagego(0)\""+ " class=\"nextPage\">首页</a>";
				if (cur <= start)
					sb+="<span class=\"upPage\">上一页</span>";
				else
					sb+="<a href=\"#\" onclick=\"pagego(" + (cur - 1) + ")\""+ " class=\"nextPage\">上一页</a>";

				for ( i = start; i <= end; i++) {
					if (i == cur)
						sb+="<span class=\"curr\">" + i + "</span>";
					else
						sb+="<a href=\"#\" onclick=\"pagego(" + i + ")\">" + i + "</a>";
					if(i!=end){
						sb+="|";
					}
				}

				if (cur >= end)
					sb+="<span class=\"nextPage\">下一页</span>";
				else
					sb+="<a href=\"#\" onclick=\"pagego(" + (cur + 1) + ")\""+ " class=\"nextPage\">下一页</a>";				
				sb += "<a href=\"#\" onclick=\"pagego("+pageNum+")\""+ " class=\"nextPage\">尾页</a>";
				sb += "<input type='text' class='skiptxt' id='txtpageGo'/> <input onclick='p=document.getElementById(\"txtpageGo\").value;if(p!=\"\"&&!isNaN(p)){pagego(p);}' type='button' value='跳转'/>";
				sb+="<sctipt"
				return sb;
			}

			
		}

显示就是根据数据绘制出html

如何使用

<div class="pageBlock" id="pageBlock"></div>

var splitPage=new SplitPage(127,10,4,8);
document.getElementById('pageBlock').innerHTML=splitPage.showHTML(new PageStyleA());

如果需要其他显示方式，

则新建一个类 PageStyleB即可

css:

.pageBlock{ padding:20px 0; text-align:left;}
.pageBlock a,.pageBlock span{ padding-right:8px; padding-left:3px;}
.pageBlock .upPage{ margin-right:20px;}
.pageBlock .nextPage{ margin-left:20px;}
.pageBlock span.curr{ font-weight:700; color:#f90;}
.pageBlock a{ cursor: pointer;}
.pageBlock .skiptxt{ width:50px;}

文件链接

http://pan.baidu.com/share/link?shareid=436216&uk=1510139133