<上一条：Mac下打开多个Eclipse
前端JS静态分页代码
发布-xiaoming | 浏览量-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS静态分页代码</title>
</head>
<style type="text/css">
a:link,a:visited,a:hover,.current,#info{
border:1px solid #DDD;
background:#F2F2F2;
display:inline-block;
margin:1px;
text-decoration:none;
font-size:14px;
width:40px;
height:40px;
text-align:center;
line-height:40px;
color:#AAA;
padding:1px 2px;
}
a:hover{
border:1px solid #E5E5E5;
background:#F9F9F9;
}
.current{
border:1px solid #83E7E4;
background:#DFF9F8;
margin:1px;
color:#27CBC7;
}
a.next
{ width: 50px;}
a.pre
{ width: 70px;}
#info{
width:auto;
}
</style>
<body>
<div id="setpage"></div>
<script type="text/javascript">
<!--
var totalpage,pagesize,cpage,count,curcount,outstr;
//初始化
cpage = 5;
totalpage = 15; //总页数
pagesize = 4;
outstr = "";
function gotopage(target)
{
cpage = target; //把页面计数定位到第几页
setpage();
console.log(cpage);
//reloadpage(target); //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况
}
function setpage()
{
if(totalpage<=10){ //总页数小于十页
for (count=1;count<=totalpage;count++)
{ if(count!=cpage)
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current' >"+count+"</span>";
}
}
}
if(totalpage>10){ //总页数大于十页
if(parseInt((cpage-1)/10) == 0)
{
for (count=1;count<=10;count++)
{ if(count!=cpage)
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current'>"+count+"</span>";
}
}
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")' class='next'> 下一页 </a>";
}
else if(parseInt((cpage-1)/10) == parseInt(totalpage/10))
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")' class='pre'>上一页</a>";
for (count=parseInt(totalpage/10)*10+1;count<=totalpage;count++)
{ if(count!=cpage)
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current'>"+count+"</span>";
}
}
}
else
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")' class='pre'>上一页</a>";
for (count=parseInt((cpage-1)/10)*10+1;count<=parseInt((cpage-1)/10)*10+10;count++)
{
if(count!=cpage)
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current'>"+count+"</span>";
}
}
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")' class='next'> 下一页 </a>";
}
}
document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共"+totalpage+"页|第"+cpage+"页<\/span>" + outstr + "<\/div>";
outstr = "";
}
setpage(); //调用分页
//-->
</script>
</body>
</html>
或许你还对下面的文章感兴趣
