純JavaScript的分頁案例

應用於分頁情況是我們通過記錄總數，每頁記錄行數，當期頁碼等等數據來顯示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