JavaScript模仿實驗室分頁組件__Java

原文摘自我的前端部落格，歡迎大家來訪問 http://hacke2.github.io
起因

剛才蔡哥讓我重啟一下鄰水專案服務器，我順便有回顧了一下去年做的項目。。當時我的工作是園區動態+組態管理，園區動態裡有個分頁 當時是拿實驗室以前項目：泛教育分頁組件做的，完全是拿來主義，現在看到，就像用javascript實現一下，沒什麼技術含量，設計思路也是 至少7年前的，直接一個a標籤開啟一個串連，將你的當前頁數傳到後台去。什麼時候再做一個AJAX的。 分析

鄰水分頁如下圖： 現在資料還不是很多，顯示了三條，而且有首頁、尾頁、上頁、下頁等輔助按鈕，噹噹前頁為第一個時，上頁和首頁成不可點擊狀。 噹噹前頁為最後一個時，下頁和尾頁成不可點擊狀。 還有以下規則： * 如果總頁數大於10且當前頁遠離總頁數(小於5)，則顯示5個，後面的省略直到最後一個； * 總頁數大於10且當前頁接近總頁數(小於總頁數-3)則顯示後4個； * 除開上面兩個情況，顯示當前頁前後2頁 代碼

將page傳到後台去取資料，一頁顯示多少條也在後台弄吧，用a數組存a標籤，比字串拼接快很多，StringBuffer也是按照這個原理實現的。

function iPage(obj,count,curPage){  var href = 'article.do?page=';var obj=obj;var count=count;var curPage=curPage;var a=[];//總頁數少於10 全部顯示,大於10 顯示前3 後3 中間3 其餘....if(curPage == 1) {a.push('<a href="#" class="unclick" >首頁</a>');a.push('<a href="#" class="unclick" >上頁</a>');}else {a.push('<a href="' + href + 1 + '" >首頁</a>');a.push('<a href="' + href + (curPage-1) + '"  >上頁</a>');}//總頁數小於10if(count<=10){for(var i=1;i<=count;i++){createPage(i);}}else {if(curPage <= 4) {//總頁數大於10且當前頁遠離總頁數(小於5)for(var i = 1; i <=5; i++) {createPage(i);}a.push('...<a href="' + href + count + '">'+count+'</a>')}else if(curPage>=count-3){//總頁數大於10且當前頁接近總頁數(小於總頁數-3)a.push('<a href="' + href + 1 + '">1</a>');for(var i=count-4;i<=count;i++){createPage(i);}}else{ //除開上面兩個情況a.push('<a href="' + href + 1 + '">1</a>...');for(var i=curPage-2;i<=curPage+2;i++){createPage(i);}a.push('...<a href="' + href + count + '">'+count+'</a>');}}if(curPage==count){a.push('<a href="#" class="unclick">下頁</a>');a.push('<a href="#" class="unclick">尾頁</a>');}else{a.push('<a href="' + href + (curPage + 1) + '">下頁</a>');a.push('<a href="' + href + count + '">尾頁</a>');}obj.innerHTML=a.join("");//產生頁面function createPage(i){if(curPage==i){a.push('<a href="' + href + i + '" class="on">'+i+'</a>');}else{a.push('<a href="' + href + i + '" >'+i+'</a>');}}}

查看完整DEMO

end