<!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>
新闻热点
疑难解答
