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

随机推荐

cdq分治入门--BZOJ1176: [Balkan2007]Mokia
对w*w,w<=2000000的矩形,一开始全是0(或一开始全是s),n<=170000个操作,每次操作:矩阵内某点加上一个数,查某一个子矩阵的和,保证修改数<=160000,询问数 ...
linux程序分析工具
ldd和nm是Linux下两个非常实用的程序分析工具.ldd是用来分析程序运行时需要依赖的动态链接库的工具,nm是用来查看指定程序中的符号表信息的工具,objdump用来查看源代码与汇编代码,-d只查 ...
Linux操作系统下IPTables配置
filter表的防火墙 1.查看本机关于IPTABLES的设置情况 [root@tp ~]# iptables -L -n Chain INPUT (policy ACCEPT) target pro ...
POJ 2686_Traveling by Stagecoach【状态压缩DP】
题意: 一共有m个城市,城市之间有双向路连接,一个人有n张马车票,一张马车票只能走一条路,走一条路的时间为这条路的长度除以使用的马车票上规定的马车数,问这个人从a出发到b最少使用时间. 分析: 状态压 ...
ubuntu忘记root密码的解决办法
ubuntu忘记密码,不需要重装系统即可重新设置root密码,以下是步骤: 1)在系统一启动时,按ESC键,目的是为了出现选单页面 2) 当看到选单页面时,此时按下[e] 这个键,此时会进入grub ...
记 SpringBoot1.* 转 Springoot2.0 遇到的问题
1.拦截器问题到2.0之后在配置文件中写 static-path-pattern: /static/** 已经不起作用(2.0需要在方法中配置) SpringBoot1.*写法 @Configura ...
基于图片识别服务的IOS图片识别程序
由于TensorFlow提供的IOS版Demo相对于Android版识别率不高,所以开发了通过识别服务进行图片识别的IOS版程序. 该程序基于图片识别服务(http://www.cnblogs.com ...
Linux system log avahi-daemon[3640]: Invalid query packet.
2014-06-11 Check the Linux system log find the errorr: Jun 9 11:18:49 hostname avahi-daemon[3640]: ...
cocos2d-x 3.0 CREATE_FUNC解析
#define CREATE_FUNC(__TYPE__) \ static __TYPE__* create() \ { \ __TYPE__ *pRet = new __TYPE__(); \ i ...
怎样在gluster的源代码中加入自己的xlator
本文并不说明怎样编写一个xlator.在glusterfs3.6.1下验证成功目标在glusterfs-3.6.1/xlators/debug/下建立一个自己的xlator库并能够统一安装到系统文件 ...

使用JS分页 <span> beta 1.0

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

随机推荐

热门专题