js分页代码

最新推荐文章于 2024-03-19 05:05:30 发布

as5005005

最新推荐文章于 2024-03-19 05:05:30 发布

阅读量111

点赞数

分类专栏：技术转载文章标签： Ajax JavaScript XHTML HTML ViewUI

技术转载专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!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" lang="gb2312">
<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载入的情况
}
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+")'> 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)+")'>previous</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)+")'>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)' onclick='gotopage("+count+")'>"+count+"</a>";
                }else{
                    outstr = outstr + "<span class='current'>"+count+"</span>";
                }
            }
            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>";
        }
    }    
    document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共"+totalpage+"页|第"+cpage+"页<\/span>" + outstr + "<\/div>";
    outstr = "";
}
setpage();    //调用分页
//-->
</script>
</body>
</html>

as5005005

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js分页代码

[code="javascript"]JS静态分页程序a:link,a:visited,a:hover,.current,#info{ border:1px solid #DDD; background:#F2F2F2; display:inline-block; margin:1px; text-decoration:no...
复制链接

扫一扫