JS静态分页程序

最新推荐文章于 2024-11-08 16:09:18 发布

rigger21

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量1.3k

点赞数

分类专栏： AJAX 文章标签： javascript border class function div ajax

AJAX 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html>
<head>
<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:12px;
     width:15px;
     height:15px;
     text-align:center;
     line-height:15px;
     color:#AAA;
     padding:1px 2px;
}
a:hover{
     border:1px solid #E5E5E5;
     background:#F9F9F9;
}
.current{
     border:1px solid #83E7E4;
     background:#DFF9F8;
     margin:1px;
     color:#27CBC7;
}
#info{
     width:auto;
}
</style>

<body>
<div id="setpage"></div>
<script type="text/javascript">
<!--
var totalpage,pagesize,cpage,count,curcount,outstr;
//初始化
cpage = 1;
totalpage = 56;
pagesize = 10;
outstr = "";

function gotopage(target)
{
     cpage = target;         //把页面计数定位到第几页
     setpage();
     //reloadpage(target);     //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况
}

     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)' οnclick='gotopage("+count+")'>"+count+"</a>";
                 }else{
                     outstr = outstr + "<span class='current'>"+count+"</span>";
                 }
             }
             outstr = outstr + "<a href='javascript:void(0)' οnclick='gotopage("+count+")'> next </a>";
         }
         else if(parseInt((cpage-1)/10) == parseInt(totalpage/10))
         {
             outstr = outstr + "<a href='javascript:void(0)' οnclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>";
             for (count=parseInt(totalpage/10)*10+1;count<=totalpage;count++)
             {     if(count!=cpage)
                 {
                     outstr = outstr + "<a href='javascript:void(0)' οnclick='gotopage("+count+")'>"+count+"</a>";
                 }else{
                     outstr = outstr + "<span class='current'>"+count+"</span>";
                 }
             }
         }
         else
         {
             outstr = outstr + "<a href='javascript:void(0)' οnclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</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)' οnclick='gotopage("+count+")'>"+count+"</a>";
                 }else{
                     outstr = outstr + "<span class='current'>"+count+"</span>";
                 }
             }
             outstr = outstr + "<a href='javascript:void(0)' οnclick='gotopage("+count+")'> next </a>";
         }

     }
     document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共"+totalpage+"页|第"+cpage+"页<//span>" + outstr + "<//div>";
     outstr = "";
}

setpage(); //调用分页

//-->
</script>

</body>
</html>