使用JS分页 span beta 1.0

<html>
    <head>
        <title>分页</title>
    <style>
    #titleDiv{
        width:500px;
        background-color:silver;
        margin-left:300px;
        margin-top:100px;
    }
        
    #titleDiv span{
        margin-left:50px;
    }

    #contentDiv{
        width:500px;
        background-color:gray;
        margin-left:300px;    
    }
    
    #contentDiv span{
        margin-left:54px;
    }
    
    #pageDiv{
        width:500px;
        margin-left:420px;
        margin-top:20px;
    }

    #pageDiv span{
        margin-left:10px;
    }
    </style>
</head>
<body>
    <div id="titleDiv">
        <span>学号</span><span>姓名</span><span>年龄</span><span>性别</span><br/>
    </div>
    <div id="contentDiv">    

    </div>
    <div id="pageDiv">
        <span onclick="doFirst();">首页</span><span onclick="doLast()">上一页</span>
        <span onclick="doNext();">下一页</span><span onclick="doEnd()">尾页</span>
        <span>第<span id="num"></span>页</span>
        <input type="text" style="width:20px" id="go"/><span onclick="Go()">GO</span>    
    </div>
</body>
<script>
    //创建数组
    var stus=[];
    //创建学生函数对象
    function Student(num,sname,age,sex){
        this.num=num;
        this.sname=sname;
        this.age=age;
        this.sex=sex;
        this.toString=function(){
        return num+"-"+sname+"-"+age+"-"+sex;
        }
    }

    //初始化
    function init(){
        //多个学生信息装入数组中
        for(var i=0;i<55;i++){
            stus.push(new Student(1000+i,'zs'+i,20+i,'男'));
        }
    }
</script>

<script>
        init();
</script>

<script>
    var contentDiv=document.getElementById("contentDiv");
    //获取表示第几页的id,用于插入是第几页
    var Num=document.getElementById("num");
    function PageModel(){
        this.cunPage;//当前页
        this.pageContent;//一页显示多少个
        this.totalNum;//总记录数
        this.totalPage=this.totalNum%this.pageContent>0?(this.totalNum/this.pageContent+1):(this.totalNum/this.pageContent);//总页数
    }
    var pageModel=new PageModel();
    //每页记录数
    pageModel.pageContent=10;
    //总记录数     
    var totalNum=stus.length;
    //总页数
    var totalPage=totalNum%pageModel.pageContent>0?Math.ceil(totalNum/pageModel.pageContent):Math.floor(totalNum/pageModel.pageContent);

    //首页
    function doFirst(){
        pageModel.cunPage=1;
        var s="";
        for(var i=0;i<pageModel.pageContent;i++){
            s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';
        }
        contentDiv.innerHTML=s;
        Num.innerText=pageModel.cunPage;
    }

    //默认为首页
    doFirst();
    
    //下一页
    function doNext(){
        if(pageModel.cunPage-totalPage<0){
            pageModel.cunPage++;        
        }
        //alert(pageModel.cunPage);
        var start=(pageModel.cunPage-1)*pageModel.pageContent;
        var end=0;
        var flag=false;//用于判断是否是最后一页
        if(pageModel.cunPage-totalPage<0){            
            end=pageModel.cunPage*pageModel.pageContent;
            flag=true;
        }else if(pageModel.cunPage-totalPage==0){
            end=totalNum;
            flag=true;
        }else{
            flag=false;
        }
        if(flag){
            var s="";
            for(var i=start;i<end;i++){
                s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';
            }
            contentDiv.innerHTML=s;
            Num.innerText=pageModel.cunPage;                
        }
    }
    
    //上一页
    function doLast(){
        if(pageModel.cunPage>1){
            pageModel.cunPage--;
        }        
        var start=(pageModel.cunPage-1)*pageModel.pageContent;
        var end=pageModel.cunPage*pageModel.pageContent;
        var s="";
        for(var i=start;i<end;i++){
            s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';
        }
        contentDiv.innerHTML=s;
        Num.innerText=pageModel.cunPage;
    }
    
    //最后一页
    function doEnd(){
        pageModel.cunPage=totalPage;
        var start=(pageModel.cunPage-1)*pageModel.pageContent;
        var end=totalNum;
        //alert(start+"____*****"+end);
        var s="";
        for(var i=start;i<end;i++){
            s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';
        }
        contentDiv.innerHTML=s;
        Num.innerText=pageModel.cunPage;
    }
    
    //跳转到某一页
    function Go(){
        var obj=document.getElementById("go").value;
        var pageNum=obj-totalPage;
        if(obj>0&&pageNum<0){
            pageModel.cunPage=obj;
            var start=(pageModel.cunPage-1)*pageModel.pageContent;
            var end=pageModel.cunPage*pageModel.pageContent;
            var s="";
            for(var i=start;i<end;i++){
                s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';
            }
            contentDiv.innerHTML=s;
            Num.innerText=pageModel.cunPage;
        }else if(pageNum==0){
            doEnd();
            Num.innerText=pageModel.cunPage;
        }else{
            alert("输入页数有误，请重新输入!");
        }
    }
</script>
</html>
View Code