使用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>

 <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>

使用JS分页 <span> beta 1.0的更多相关文章

使用JS分页 <span> beta 3.0 完成封装的分页
<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; backgr ...
使用JS分页 <span> beta 2.0 未封装的分页
<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; backgr ...
自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
Jquery-pagination.js分页处理
首先提供pagination.js的插件源码 /** * This jQuery plugin displays pagination links inside the selected elemen ...
jquery.pagination.js分页
参数说明参数名描述参数值 maxentries 总条目数必选参数,整数 items_per_page 每页显示的条目数 ...
一个重构的js分页类
// JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...
浅谈js分页的几种方法
一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页更深入的去理解分页的意 ...
JS分页条插件
目标制作js分页导航jq插件,用于无刷新分页或者刷新分页实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照 ...
js分页实例
js分页实例案例1 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageu ...

随机推荐

[NOIP2005] 提高组洛谷P1051 谁拿了最多奖学金
题目描述某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 1) 院士奖学金,每人8000元,期末平均成绩高于80分(>80),并且在本学期内发表1篇或1 ...
乱记结论之OI常用四大数列
一.斐波那契数列 $f(0)=1,f(1)=1,f(i)=f(i-1)+f(i-2) \ \ \ \ (i>=2)$ 经典的解释是兔子生小孩,第0年一对兔子,一对兔子需要一年长大,后面每年都生小 ...
[bzoj1485][HNOI2009]有趣的数列_卡特兰数_组合数
有趣的数列 bzoj-1485 HNOI-2009 题目大意:求所有1~2n的排列满足奇数项递增,偶数项递增.相邻奇数项大于偶数项的序列个数%P. 注释:$1\le n\le 10^6$,$1\le ...
P1605 迷宫洛谷
https://www.luogu.org/problem/show?pid=1605 题目背景迷宫 [问题描述] 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和终点坐 ...
zip4j加密压缩、解压缩文件、文件夹
原文:http://blog.csdn.net/k21325/article/details/54376188 1.首先,引用到zip4j的第三方类库,感谢作者的无私奉献,官网打不开,这里就不贴了,下 ...
cocos2d-x CCScrollView和CCTableView的使用
在游戏和应用中常常要实现左右滑动展示游戏帮助.以列表显示内容的UI效果,就像android中的Gallery和ListView. 本文通过CCScrollView和CCTableView分别来实现这两 ...
Struts2.3动态调用报 No result defined for action 错误
struts 2.3.16 採用动态调用发现不工作报404 not found,网上查找原因: 1.由于:struts2中默认不同意使用DMI 所以:须要在配置文件里打开: <constant ...
Android帧动画实现,防OOM,比原生动画集节约超过十倍的资源
2015年项目接到一个需求,实现一个向导动画,这个动画一共六十张图片,当时使用的是全志A33的开发(512的内存),通过使用Android的动画集实现,效果特别卡顿,然后想到这样的方式来实现,效果非常 ...
Thinking in Java---多线程仿真：银行出纳员仿真＋饭店仿真＋汽车装配工厂仿真
多线程一个非常有意思的作用就是用于仿真,这篇博客就会结合几个仿真实例来综合运用一下前面所学的多线程并发知识. 一.银行出纳员仿真问题描写叙述:银行会有非常多来办业务的顾客,他们会排队等待服务:对于银 ...
Brackets常用插件
Emmet插件:https://github.com/emmetio/brackets-emmet AngularJS插件:https://github.com/angular-ui/AngularJ ...

使用JS分页 <span> beta 1.0

使用JS分页 <span> beta 1.0的更多相关文章

随机推荐

热门专题