使用JS分页 <span> beta 2.0 未封装的分页

最新推荐文章于 2022-05-10 23:17:20 发布

A458545418

最新推荐文章于 2022-05-10 23:17:20 发布

阅读量71

点赞数

原文链接：http://www.cnblogs.com/1020182600HENG/p/6072964.html

版权

<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;
                width: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 οnclick="doFirst();">首页</span><span οnclick="doUp();">上一页</span>
        <span οnclick="doNext();">下一页</span><span οnclick="doLast();">尾页</span>
            <input id="goPage" style="width:20px"/><span οnclick="doGo();">GO</span>
            
        <!--
            <input type="button" οnclick="doFirst();" value="首页"></input><input type="button" οnclick="doUp();"  value="上一页"></input>
        <input type="button" οnclick="doNext();"  value="下一页"></input><input type="button" οnclick="doLast();"  value="尾页"></input>
            <input id="goPage" style="width:20px"/><input type="button" οnclick="doGo();" value="GO"></input>
        </div>
        -->
        <a href="#" onclick="doFirst();" >首页</a>    
        <a href="#" onclick="doUp();" >上一页</a>    
        <a href="#" onclick="doNext();" >下一页</a>
        <a href="#" onclick="doLast();" >尾页</a>    
        <input id="goPage" style="width:20px"/><a href="#" onclick="doGo();" >GO</a>
    </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);
        }
        
    }

    //首页
    function doFirst(){
        pageModel.cunPage=1;
        contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
    }

    //上一页
    function doUp(){
        if(pageModel.cunPage<=1){
                return ;
        }
        pageModel.cunPage--;    
        contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
    }
    
    //下一页
    function doNext(){
        if(pageModel.cunPage>=pageModel.totalPage()){
            return ;
        }
        pageModel.cunPage++;
        contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
    }


    //最后一页
    function doLast(){
        pageModel.cunPage=pageModel.totalPage();
        contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
    }

    //跳转
    function doGo(){
        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;
    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                 width: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 οnclick="doFirst();">首页</span><span οnclick="doUp();">上一页</span>
 50         <span οnclick="doNext();">下一页</span><span οnclick="doLast();">尾页</span>
 51             <input id="goPage" style="width:20px"/><span οnclick="doGo();">GO</span>
 52             
 53         <!--
 54             <input type="button" οnclick="doFirst();" value="首页"></input><input type="button" οnclick="doUp();"  value="上一页"></input>
 55         <input type="button" οnclick="doNext();"  value="下一页"></input><input type="button" οnclick="doLast();"  value="尾页"></input>
 56             <input id="goPage" style="width:20px"/><input type="button" οnclick="doGo();" value="GO"></input>
 57         </div>
 58         -->
 59         <a href="#" onclick="doFirst();" >首页</a>    
 60         <a href="#" onclick="doUp();" >上一页</a>    
 61         <a href="#" onclick="doNext();" >下一页</a>
 62         <a href="#" onclick="doLast();" >尾页</a>    
 63         <input id="goPage" style="width:20px"/><a href="#" onclick="doGo();" >GO</a>
 64     </body>
 65 <script>
 66         var stus=[];
 67         function Student(num,sname,age,sex){
 68             this.num=num;
 69             this.sname=sname;
 70             this.age=age;
 71             this.sex=sex;
 72             this.toString=function(){
 73                 return num+"-"+sname+"-"+age+"-"+sex;
 74             }
 75         }
 76         //初始化
 77         function init(){
 78             //多个学生信息装入数组中
 79             for(var i=0;i<55;i++){
 80             stus.push(new Student(10000+i,'zs'+i,20+i,'男'));
 81             }
 82         }
 83 </script>
 84 
 85 <script>
 86     var contentDiv=document.getElementById("contentDiv");
 87     /**
 88         数据源 显示位置 每页显示几个 当前页 
 89         可以把下面方法 封装到分页模型，实现通用性
 90 
 91         如果是table，如何实现分页功能？
 92     */
 93     //分页模型
 94     function PageModel(){
 95         this.cunPage;//当前页
 96         this.pageContent;//一页显示多少个
 97         this.totalNum;//总记录数
 98         this.totalPage=function (){
 99                 return Math.ceil(this.totalNum/this.pageContent);
100         }
101         
102     }
103 
104     //首页
105     function doFirst(){
106         pageModel.cunPage=1;
107         contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
108     }
109 
110     //上一页
111     function doUp(){
112         if(pageModel.cunPage<=1){
113                 return ;
114         }
115         pageModel.cunPage--;    
116         contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
117     }
118     
119     //下一页
120     function doNext(){
121         if(pageModel.cunPage>=pageModel.totalPage()){
122             return ;
123         }
124         pageModel.cunPage++;
125         contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
126     }
127 
128 
129     //最后一页
130     function doLast(){
131         pageModel.cunPage=pageModel.totalPage();
132         contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
133     }
134 
135     //跳转
136     function doGo(){
137         var goPage =parseInt(document.getElementById("goPage").value);
138         if(goPage<1||goPage>pageModel.totalPage()){
139             return ;
140         }
141         pageModel.cunPage=parseInt(goPage);        
142         contentDiv.innerHTML=doShow(pageModel.cunPage,stus);
143     }
144 
145     //插入显示
146     function doShow(CurrentPage,stus){
147         var start=(CurrentPage-1)*pageModel.pageContent;
148         var end=CurrentPage*pageModel.pageContent;        
149         var s="";
150         for(var i=start;i<end;i++){
151                 if(stus[i]!=null){
152                     s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'
153                     +stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';
154                 }
155         }
156         return s;
157     }
158 </script>
159 <script>    
160     init();
161     var pageModel=new PageModel();
162     pageModel.pageContent=10;
163     pageModel.totalNum=stus.length;
164     doFirst();
165 </script>
166 </html>

转载于:https://www.cnblogs.com/1020182600HENG/p/6072964.html

A458545418

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JS分页 <span> beta 2.0 未封装的分页

<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; background-color:silver; ...
复制链接

扫一扫