純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,8this.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>";elsesb+="<a href=\"#\" onclick=\"pagego(" + (cur - 1) + ")\""+ " class=\"nextPage\">上一頁</a>";for ( i = start; i <= end; i++) {if (i == cur)sb+="<span class=\"curr\">" + i + "</span>";elsesb+="<a href=\"#\" onclick=\"pagego(" + i + ")\">" + i + "</a>";if(i!=end){sb+="|";}}if (cur >= end)sb+="<span class=\"nextPage\">下一頁</span>";elsesb+="<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