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

随机推荐

CentOS虚拟机与本机同步时间
接着之前的任务,还是为了在VMWare上搭建分布式hadoop集群.搭着搭着注意到虚拟机上的时间和本机是不同步的,而且可以说是乱七八糟,3台虚拟机时间都与本机差了8个小时以上.首先确认不是时区的问题, ...
CentOS7使用mount命令来挂载CDROM
https://blog.csdn.net/testcs_dn/article/details/41448557
静态区间第k大（归并树）
POJ 2104为例思想: 利用归并排序的思想: 建树过程和归并排序类似,每个数列都是子树序列的合并与排序. 查询过程,如果所查询区间完全包含在当前区间中,则直接返回当前区间内小于所求数的元素个数, ...
UVA 437_The Tower of Babylon
题意: 一堆石头,给定长宽高,每种石头均可以使用无数次,问这堆石头可以叠放的最高高度,要求下面的石头的长和宽分别严格大于上面石头的长和宽. 分析: 采用DAG最长路算法,由于长宽较大,不能直接用于表示 ...
Spring集成Jedis（不依赖spring-data-redis）（单机/集群模式）（待实践）
Jedis是Redis的Java客户端,Spring将Jedis连接池作为一个Bean来配置.如果在Spring Data的官网上可以发现,Spring Data Redis已经将Jedis集成进去了 ...
系统无法安装 OfficeControl.ocx 控件如何解决
在OA上要直接查看word等公告文件,就必须安装office控件.要安装office控件,需要在IE浏览器中做相应的设置.如何设置呢,下面由小编具体介绍下. 工具/原料 OA IE浏览器方法 ...
Google搜索引擎用法
Google搜索引擎用法 ★搜索引擎的选择先简单说一下"搜索引擎的选择". 在咱们天朝,Google 屡屡被 GFW 骚扰,导致百度占了便宜,成为份额最高的搜索引擎.不过今天这篇 ...
使用RoboCopy 命令[转载]
经常进行文件管理操作的朋友们,不满意于Windows系统内置的复制功能,因为它太龟速了.于是大家就使用FastCopy.TeraCopy之类的软件来加速复制,但是你是否知道Windows 7已经内置快 ...
2011 ACM-ICPC 成都赛区A题 Alice and Bob （博弈动规）
题目大意: 有K堆石子,每堆有Ki个.两人的操作能够是: 1 从某一堆拿走一个假设该堆在此之后没有石子了.就消失 2 合并两个堆求是否 ...
云计算VDI相关职位招聘
中电科华云信息技术有限公司是中国优秀的云计算方案提供商和服务商之中的一个.公司依托中国电子科技集团公司,实施"自主.可信.定制.服务"的差异化发展战略,以实现自主创新的技术研发.自 ...

使用JS分页 <span> beta 1.0

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

随机推荐

热门专题