Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 902|回复: 0

JS代码分页

[复制链接]

该用户从未签到

发表于 2011-10-11 19:06:24 | 显示全部楼层 |阅读模式
<!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>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

GMT+8, 2024-11-5 11:30 , Processed in 1.676682 second(s), 49 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表