JavaScript模仿實驗室分頁組件，javascript分頁
原文摘自我的前端部落格，歡迎大家來訪問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>');}}}end
將w()方法中的try-catch改為下面這個就是倒序分頁輸出了。
try
{
c=t[t.length-1-i].split("|");
document.write(" "+(t.length - i)+"、文 章 標 題<a href="+c[1]+" target=_blank>"+c[0]+"</a>時間"+c[2]+"作者"+c[3]+"<br>");
}
catch(e)
{
alert("i:"+t.length - i+",b:"+b+",s:"+s);
}
一段javascript分頁代碼
暈,不用那麼複雜吧?
樓上(l_jiayou)的代碼在每頁2張的情況下正常,每頁顯示3張就不正常了
看看我的,無論你怎麼定義每頁顯示數和圖片總數都正常
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Javascript分頁</title>
<script type="text/javascript">
var page=1;
var pagesize=2;//每頁顯示數量
var picnum=9;//圖片總數量
var pagenum;
var showpage='';
var showpage1='';
function showpic(no) {
page=no;
pagenum=picnum/pagesize;
if (picnum%pagesize>0) pagenum=parseInt(picnum/pagesize)+1;
document.getElementById("img").innerHTML='';
for (i=1;i<=picnum;i++){
if(i > (page-1)*pagesize && i<=page*pagesize){
document.getElementById("img").innerHTML+='<img src='+i+'.jpg>';
}
}
if (page>1){
showpage='<a href="javascript:showpic(1);">首頁</a> <a href="javascript:showpic('+(page-1)+');">上一頁</a>'
}else{
showpage='';
}
if (page<pagenum){
showpage1=' <a href="javascript:showpic('+(page+1)+');">下一頁</a> <a href="javascript:showpic('+pagenum+');">尾頁</a> '
}else{
showpage1='';
}
document.getElementById("pages").innerHTML='頁次：'+page+'/<font color=red>'+pagenum+'</font> 共：<font color=red>'+picnum+'</font> 條 '+showpage+showpage1......餘下全文>>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
