JS之页面实现多个分页

  准备如下:
去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\" οnchange='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>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值