項目用到的分頁功能（保存）

時間 2019-11-12

標籤項目用到分頁功能保存简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分頁練習</title>
<script type="text/javascript">
var totalpage,pagesize,cpage,count,curcount,out;
//初始化
cpage = 1;
pagesize = 10; //每頁的數量
totalpage =19; //頁數
out = "";
//分頁
function goto(target)
{
cpage = target; //把頁面計數定位到第幾頁
sett();

}
function sett()
{
if(totalpage<=5){ //總頁數小於五頁 ,循環頁數
for (count=1;count<=totalpage;count++)
{ if(count!=cpage)
{
out = out + "<a href='javascript:void(0)' onclick='goto("+count+")'>"+count+"</a>";
}else{
out = out + "<span class='current' >"+count+"</span>";
}
}
}
if(totalpage>5){ //總頁數大於五頁
if(parseInt((cpage-1)/5) == 0)
{
for (count=1;count<=5;count++)
{ if(count!=cpage)
{
out = out + "<a href='javascript:void(0)' onclick='goto("+count+")'>"+count+"</a>";
}else{
out = out + "<span class='current'>"+count+"</span>";
}
}
out = out + "<a href='javascript:void(0)' onclick='goto("+count+")'> 下一頁 </a>";
}
else if(parseInt((cpage-1)/5) == parseInt(totalpage/5))
{
out = out + "<a href='javascript:void(0)' onclick='goto("+(parseInt((cpage-1)/5)*5)+")'>上一頁</a>";
for (count=parseInt(totalpage/5)*5+1;count<=totalpage;count++)
{ if(count!=cpage)
{
out = out + "<a href='javascript:void(0)' onclick='goto("+count+")'>"+count+"</a>";
}else{
out = out + "<span class='current'>"+count+"</span>";
}
}
}
else
{
out = out + "<a href='javascript:void(0)' onclick='goto("+(parseInt((cpage-1)/5)*5)+")'>上一頁</a>";
for (count=parseInt((cpage-1)/5)*5+1;count<=parseInt((cpage-1)/5)*5+5;count++)
{
if(count!=cpage)
{
out = out + "<a href='javascript:void(0)' onclick='goto("+count+")'>"+count+"</a>";
}else{
out = out + "<span class='current'>"+count+"</span>";
}
}
out = out + "<a href='javascript:void(0)' onclick='goto("+count+")'>下一頁</a>";
}
}
document.getElementById("waChe").innerHTML = "<div id='waChe'><span id='info'>共"+totalpage+"頁|第"+cpage+"頁<\/span>" + out + "<\/div>";
out = "";
}

window.onload=function(){
sett(); //調用分頁

}
</script>
<style type="text/css">
#waChe a,
#waChe a:visited,
#waChe a:hover,
#waChe .current,
#waChe #info{
border: 1px solid #DDD;
background: #fff;
display: inline-block;
margin: 1px;
text-decoration: none;
font-size: 12px;
text-align: center;
color: #666;
padding: 8px 14px;
}

#waChe .current{
border:1px solid #83E7E4;
background:#0F90D2;
margin:1px;
color:#fff;
}
#waChe #info{
width:auto;
}
</style>
</head>
<body>
<div class="totalRec">
<div class="pages">
<div id="waChe"></div>
</div>
</div>
</body>
</html>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。