使用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
  1 <html>
  2     <head>
  3         <title>分页</title>
  4     <style>
  5     #titleDiv{
  6         width:500px;
  7         background-color:silver;
  8         margin-left:300px;
  9         margin-top:100px;
 10     }
 11         
 12     #titleDiv span{
 13         margin-left:50px;
 14     }
 15 
 16     #contentDiv{
 17         width:500px;
 18         background-color:gray;
 19         margin-left:300px;    
 20     }
 21     
 22     #contentDiv span{
 23         margin-left:54px;
 24     }
 25     
 26     #pageDiv{
 27         width:500px;
 28         margin-left:420px;
 29         margin-top:20px;
 30     }
 31 
 32     #pageDiv span{
 33         margin-left:10px;
 34     }
 35     </style>
 36 </head>
 37 <body>
 38     <div id="titleDiv">
 39         <span>学号</span><span>姓名</span><span>年龄</span><span>性别</span><br/>
 40     </div>
 41     <div id="contentDiv">    
 42 
 43     </div>
 44     <div id="pageDiv">
 45         <span onclick="doFirst();">首页</span><span onclick="doLast()">上一页</span>
 46         <span onclick="doNext();">下一页</span><span onclick="doEnd()">尾页</span>
 47         <span>第<span id="num"></span>页</span>
 48         <input type="text" style="width:20px" id="go"/><span onclick="Go()">GO</span>    
 49     </div>
 50 </body>
 51 <script>
 52     //创建数组
 53     var stus=[];
 54     //创建学生函数对象
 55     function Student(num,sname,age,sex){
 56         this.num=num;
 57         this.sname=sname;
 58         this.age=age;
 59         this.sex=sex;
 60         this.toString=function(){
 61         return num+"-"+sname+"-"+age+"-"+sex;
 62         }
 63     }
 64 
 65     //初始化
 66     function init(){
 67         //多个学生信息装入数组中
 68         for(var i=0;i<55;i++){
 69             stus.push(new Student(1000+i,'zs'+i,20+i,'男'));
 70         }
 71     }
 72 </script>
 73 
 74 <script>
 75         init();
 76 </script>
 77 
 78 <script>
 79     var contentDiv=document.getElementById("contentDiv");
 80     //获取表示第几页的id,用于插入是第几页
 81     var Num=document.getElementById("num");
 82     function PageModel(){
 83         this.cunPage;//当前页
 84         this.pageContent;//一页显示多少个
 85         this.totalNum;//总记录数
 86         this.totalPage=this.totalNum%this.pageContent>0?(this.totalNum/this.pageContent+1):(this.totalNum/this.pageContent);//总页数
 87     }
 88     var pageModel=new PageModel();
 89     //每页记录数
 90     pageModel.pageContent=10;
 91     //总记录数     
 92     var totalNum=stus.length;
 93     //总页数
 94     var totalPage=totalNum%pageModel.pageContent>0?Math.ceil(totalNum/pageModel.pageContent):Math.floor(totalNum/pageModel.pageContent);
 95 
 96     //首页
 97     function doFirst(){
 98         pageModel.cunPage=1;
 99         var s="";
100         for(var i=0;i<pageModel.pageContent;i++){
101             s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';
102         }
103         contentDiv.innerHTML=s;
104         Num.innerText=pageModel.cunPage;
105     }
106 
107     //默认为首页
108     doFirst();
109     
110     //下一页
111     function doNext(){
112         if(pageModel.cunPage-totalPage<0){
113             pageModel.cunPage++;        
114         }
115         //alert(pageModel.cunPage);
116         var start=(pageModel.cunPage-1)*pageModel.pageContent;
117         var end=0;
118         var flag=false;//用于判断是否是最后一页
119         if(pageModel.cunPage-totalPage<0){            
120             end=pageModel.cunPage*pageModel.pageContent;
121             flag=true;
122         }else if(pageModel.cunPage-totalPage==0){
123             end=totalNum;
124             flag=true;
125         }else{
126             flag=false;
127         }
128         if(flag){
129             var s="";
130             for(var i=start;i<end;i++){
131                 s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';
132             }
133             contentDiv.innerHTML=s;
134             Num.innerText=pageModel.cunPage;                
135         }
136     }
137     
138     //上一页
139     function doLast(){
140         if(pageModel.cunPage>1){
141             pageModel.cunPage--;
142         }        
143         var start=(pageModel.cunPage-1)*pageModel.pageContent;
144         var end=pageModel.cunPage*pageModel.pageContent;
145         var s="";
146         for(var i=start;i<end;i++){
147             s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';
148         }
149         contentDiv.innerHTML=s;
150         Num.innerText=pageModel.cunPage;
151     }
152     
153     //最后一页
154     function doEnd(){
155         pageModel.cunPage=totalPage;
156         var start=(pageModel.cunPage-1)*pageModel.pageContent;
157         var end=totalNum;
158         //alert(start+"____*****"+end);
159         var s="";
160         for(var i=start;i<end;i++){
161             s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';
162         }
163         contentDiv.innerHTML=s;
164         Num.innerText=pageModel.cunPage;
165     }
166     
167     //跳转到某一页
168     function Go(){
169         var obj=document.getElementById("go").value;
170         var pageNum=obj-totalPage;
171         if(obj>0&&pageNum<0){
172             pageModel.cunPage=obj;
173             var start=(pageModel.cunPage-1)*pageModel.pageContent;
174             var end=pageModel.cunPage*pageModel.pageContent;
175             var s="";
176             for(var i=start;i<end;i++){
177                 s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';
178             }
179             contentDiv.innerHTML=s;
180             Num.innerText=pageModel.cunPage;
181         }else if(pageNum==0){
182             doEnd();
183             Num.innerText=pageModel.cunPage;
184         }else{
185             alert("输入页数有误，请重新输入!");
186         }
187     }
188 </script>
189 </html>

 

posted @ 2016-11-16 21:04  奋斗的少年WH  阅读(335)  评论(0)  编辑  收藏  举报