使用JS分页 <span> beta 3.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{
                /**display:inline;
                100px;*/
                margin-left:50px;
            }
            #pageDiv{
                width:500px;
                margin-left:420px;
                margin-top:20px;
                /**background-color:gold;*/
            }

            #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="doUp();">上一页</span>
        <span onclick="doNext();">下一页</span><span onclick="doLast();">尾页</span>
            <input id="goPage" style="20px"/><span onclick="doGo();">GO</span>
            
        <!--
            <input type="button" onclick="doFirst();" value="首页"></input><input type="button" onclick="doUp();"  value="上一页"></input>
        <input type="button" onclick="doNext();"  value="下一页"></input><input type="button" onclick="doLast();"  value="尾页"></input>
            <input id="goPage" style="20px"/><input type="button" onclick="doGo();" value="GO"></input>
        </div>
        -->
        <a href="#" onclick="pageModel.doFirst();" >首页</a>    
        <a href="#" onclick="pageModel.doUp();" >上一页</a>    
        <a href="#" onclick="pageModel.doNext();" >下一页</a>
        <a href="#" onclick="pageModel.doLast();" >尾页</a>    
        <input id="goPage" style="20px"/><a href="#" onclick="pageModel.doGo();" >GO</a>
        <!--
            有时候，页面打开后，source里没有元素内容，是因为当前的页面仍处于编辑状态，未保存，保存后，会正常显示
        -->
    </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(10000+i,'zs'+i,20+i,'男'));
            }
        }
</script>

<script>
    var contentDiv=document.getElementById("contentDiv");
    /**
        数据源 显示位置 每页显示几个 当前页 
        可以把下面方法 封装到分页模型，实现通用性

        如果是table，如何实现分页功能？
    */
    //分页模型
    function PageModel(){
        this.cunPage;//当前页
        this.pageContent;//一页显示多少个
        this.totalNum;//总记录数
        
        this.totalPage=function (){
                return Math.ceil(this.totalNum/this.pageContent);
        }
        
        this.doFirst=function (){     //首页
            pageModel.cunPage=1;
            contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
        }
        
        this.doUp=function (){      //上一页
            if(pageModel.cunPage<=1){
                return ;
            }
            pageModel.cunPage--;    
            contentDiv.innerHTML=doShow(pageModel.cunPage,stus);        
        }
        
        this.doNext=function (){    //下一页
            if(pageModel.cunPage>=pageModel.totalPage()){
                return ;
            }
            pageModel.cunPage++;
            contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
        }
        
        this.doLast=function (){    //最后一页
            pageModel.cunPage=pageModel.totalPage();
            contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
        }
        
        this.doGo=function (){      //跳转
            var goPage =parseInt(document.getElementById("goPage").value);
            if(goPage<1||goPage>pageModel.totalPage()){
                return ;
            }
            pageModel.cunPage=parseInt(goPage);        
            contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
        }
        
    }
    
    //插入显示
    function doShow(CurrentPage,stus){
        var start=(CurrentPage-1)*pageModel.pageContent;
        var end=CurrentPage*pageModel.pageContent;        
        var s="";
        for(var i=start;i<end;i++){
                if(stus[i]!=null){
                    s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'
                    +stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';
                }
        }
        return s;
    }
</script>
<script>    
    init();
    var pageModel=new PageModel();
    pageModel.pageContent=10;
    pageModel.totalNum=stus.length;
    pageModel.doFirst();
</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         #titleDiv span{
 12             margin-left:50px;
 13         }
 14 
 15 
 16             #contentDiv{
 17                 width:500px;
 18                 background-color:gray;
 19                 margin-left:300px;
 20                 
 21             }
 22             #contentDiv span{
 23                 /**display:inline;
 24                 100px;*/
 25                 margin-left:50px;
 26             }
 27             #pageDiv{
 28                 width:500px;
 29                 margin-left:420px;
 30                 margin-top:20px;
 31                 /**background-color:gold;*/
 32             }
 33 
 34             #pageDiv span{
 35                 margin-left:10px;
 36             }
 37         </style>
 38     </head>
 39     <body>
 40         <div id="titleDiv">
 41             <span>学号</span><span>姓名</span><span>年龄</span><span>性别</span><br/>
 42         </div>
 43         
 44         <div id="contentDiv">
 45                                 
 46         </div>
 47         
 48         <div id="pageDiv">
 49         <!--<span onclick="doFirst();">首页</span><span onclick="doUp();">上一页</span>
 50         <span onclick="doNext();">下一页</span><span onclick="doLast();">尾页</span>
 51             <input id="goPage" style="20px"/><span onclick="doGo();">GO</span>
 52             
 53         <!--
 54             <input type="button" onclick="doFirst();" value="首页"></input><input type="button" onclick="doUp();"  value="上一页"></input>
 55         <input type="button" onclick="doNext();"  value="下一页"></input><input type="button" onclick="doLast();"  value="尾页"></input>
 56             <input id="goPage" style="20px"/><input type="button" onclick="doGo();" value="GO"></input>
 57         </div>
 58         -->
 59         <a href="#" onclick="pageModel.doFirst();" >首页</a>    
 60         <a href="#" onclick="pageModel.doUp();" >上一页</a>    
 61         <a href="#" onclick="pageModel.doNext();" >下一页</a>
 62         <a href="#" onclick="pageModel.doLast();" >尾页</a>    
 63         <input id="goPage" style="20px"/><a href="#" onclick="pageModel.doGo();" >GO</a>
 64         <!--
 65             有时候，页面打开后，source里没有元素内容，是因为当前的页面仍处于编辑状态，未保存，保存后，会正常显示
 66         -->
 67     </body>
 68 <script>
 69         var stus=[];
 70         function Student(num,sname,age,sex){
 71             this.num=num;
 72             this.sname=sname;
 73             this.age=age;
 74             this.sex=sex;
 75             this.toString=function(){
 76                 return num+"-"+sname+"-"+age+"-"+sex;
 77             }
 78         }
 79         //初始化
 80         function init(){
 81             //多个学生信息装入数组中
 82             for(var i=0;i<55;i++){
 83             stus.push(new Student(10000+i,'zs'+i,20+i,'男'));
 84             }
 85         }
 86 </script>
 87 
 88 <script>
 89     var contentDiv=document.getElementById("contentDiv");
 90     /**
 91         数据源 显示位置 每页显示几个 当前页 
 92         可以把下面方法 封装到分页模型，实现通用性
 93 
 94         如果是table，如何实现分页功能？
 95     */
 96     //分页模型
 97     function PageModel(){
 98         this.cunPage;//当前页
 99         this.pageContent;//一页显示多少个
100         this.totalNum;//总记录数
101         
102         this.totalPage=function (){
103                 return Math.ceil(this.totalNum/this.pageContent);
104         }
105         
106         this.doFirst=function (){     //首页
107             pageModel.cunPage=1;
108             contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
109         }
110         
111         this.doUp=function (){      //上一页
112             if(pageModel.cunPage<=1){
113                 return ;
114             }
115             pageModel.cunPage--;    
116             contentDiv.innerHTML=doShow(pageModel.cunPage,stus);        
117         }
118         
119         this.doNext=function (){    //下一页
120             if(pageModel.cunPage>=pageModel.totalPage()){
121                 return ;
122             }
123             pageModel.cunPage++;
124             contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
125         }
126         
127         this.doLast=function (){    //最后一页
128             pageModel.cunPage=pageModel.totalPage();
129             contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
130         }
131         
132         this.doGo=function (){      //跳转
133             var goPage =parseInt(document.getElementById("goPage").value);
134             if(goPage<1||goPage>pageModel.totalPage()){
135                 return ;
136             }
137             pageModel.cunPage=parseInt(goPage);        
138             contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
139         }
140         
141     }
142     
143     //插入显示
144     function doShow(CurrentPage,stus){
145         var start=(CurrentPage-1)*pageModel.pageContent;
146         var end=CurrentPage*pageModel.pageContent;        
147         var s="";
148         for(var i=start;i<end;i++){
149                 if(stus[i]!=null){
150                     s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'
151                     +stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';
152                 }
153         }
154         return s;
155     }
156 </script>
157 <script>    
158     init();
159     var pageModel=new PageModel();
160     pageModel.pageContent=10;
161     pageModel.totalNum=stus.length;
162     pageModel.doFirst();
163 </script>
164 </html>

相关阅读:
MySQL之数据表的插入内容空与非空（六）
输出杨辉三角形
 输入三个double型的数据，放入到a,b,c三个变量中去，使用条件结构与交换逻辑将这三个变量中的值从小到大排列。
软件测试
 过程设计工具
 设计原理
 总体设计
 生活，也让别人生活
 计算器案例
 需求分析
原文地址：https://www.cnblogs.com/1020182600HENG/p/6073380.html