JS之頁面實現多個分頁

2024-04-27 15:12:58

字體：大中小

來源：轉載

供稿：網友

準備如下：去jquery官網下載jquery.js。效果如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>JS之頁面實現多個分頁</title><script src="jquery.js" type="text/javascript"></script> <style>ul,li{ list-style:none; padding:0px; margin:0px;}</style></head><body><div id="mydiv1" style="height: 150px;width: 200px;"><ul><li>01</li></ul><ul><li>02</li></ul><ul><li>03</li></ul><ul><li>04</li></ul><ul><li>05</li></ul><ul><li>06</li></ul><ul><li>07</li></ul><ul><li>08</li></ul><ul><li>09</li></ul><ul><li>10</li></ul><ul><li>11</li></ul><ul><li>12</li></ul><ul><li>13</li></ul><ul><li>14</li></ul><ul><li>15</li></ul><ul><li>16</li></ul><ul><li>17</li></ul><ul><li>18</li></ul><ul><li>19</li></ul><ul><li>20</li></ul></div><div id="changpage1"></div><div id="Div1" style="height: 150px;width: 200px;"><ul><li>01</li></ul><ul><li>02</li></ul><ul><li>03</li></ul><ul><li>04</li></ul><ul><li>05</li></ul><ul><li>06</li></ul><ul><li>07</li></ul><ul><li>08</li></ul><ul><li>09</li></ul><ul><li>10</li></ul><ul><li>11</li></ul><ul><li>12</li></ul><ul><li>13</li></ul><ul><li>14</li></ul><ul><li>15</li></ul><ul><li>16</li></ul><ul><li>17</li></ul><ul><li>18</li></ul><ul><li>19</li></ul><ul><li>20</li></ul></div><!-- 顯示 分頁信息--><div id="changpage2"></div><script type="text/Javascript">var listNum=2;  //每頁顯示數var PageNum=5;  //分頁鏈接接數(5個)var obj,j;var page=0;var nowPage=0; //當前頁var PagesLen; //總頁數var place ; //  顯示分頁的位置function divPager(var1,var2){   //alert(page);PageNum = PageNum-1;var childs = document.getElementById(var1).childNodes;var s = new Array();var x=0;for(i=0;i<childs.length;i++){  s[x]=childs[i];  x++;}obj=s;j=obj.length;PagesLen=Math.ceil(j/listNum);place = var2; //  顯示分頁的位置upPage(0,var1,var2);}function upPage(p,page,var2){nowPage=p;//內容變換for (var i=0;i<j;i++){//obj[i].style.display="none";//alert(page);$("#"+page+" ul").CSS("display","none");}for (var i=p*listNum;i<(p+1)*listNum;i++){//alert(i);if(obj[i]){//alert(obj[i]);   $("#"+page+" ul").eq(i).css("display","block")   //obj[i].style.display="block";}}//分頁鏈接變換strS="<a href='javascript:upPage(0,/""+page+"/",/""+var2+"/");'>首頁</a>  ";var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2);var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1;var strC="",startPage,endPage;if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1;}else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首頁else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}for (var i=startPage;i<=endPage;i++){if (i==nowPage)strC+="<a href='javascript:upPage("+i+",/""+page+"/",/""+var2+"/");' style='color:red;font-weight:700;'>"+(i+1)+"</a> ";else strC+="<a href='javascript:upPage("+i+",/""+page+"/",/""+var2+"/");'>"+(i+1)+"</a> ";}strE=" <a href='javascript:upPage("+(PagesLen-1)+",/""+page+"/",/""+var2+"/");'>尾頁</a>  ";strE2=nowPage+1+"/"+PagesLen+"頁"+"  共"+j+"條";var strHtml = '';if (PagesLen <1) {strHtml = '<select name="goP">';strHtml += '<option value="0">No Pages</option>';} else {var chkSelect;strHtml += "<select name=/"goP/" onchange='goPage(this.value,/""+page+"/",/""+var2+"/")'>";for (var i = 0; i < PagesLen; i++) {if (nowPage == i) chkSelect=' selected="selected"';else chkSelect='';strHtml += '<option value="' + (i+1) + '"' + chkSelect + '>' + (i+1) + ' / ' + PagesLen + '</option>';}}strHtml += '</select> ';//alert(var2);document.getElementById(var2).innerHTML=strS+strC+strE+strHtml+"   當前:"+strE2;}function goPage(pageno,page,var2){ pageno = parseInt(pageno); if (pageno > PagesLen ||pageno<1)  return ;  upPage(pageno-1,page,var2);}</script><script type="text/javascript">/*參數1：分頁的對象， 參數2：分頁信息顯示位置*/new divPager("mydiv1","changpage1","mydiv1");new divPager("Div1","changpage2","Div1");</script></body></html>

上一篇：class 創建對象

下一篇：css常用技巧