使用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] 提高组洛谷P1054 等价表达式
题目描述明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数表达式,然后列出了若干选项,每个选项也是一个代数表达式,题目的要求是判断选项中哪些代数 ...
莫（meng）比（bi）乌斯反演--BZOJ2301: [HAOI2011]Problem b
n<=50000个询问,每次问a<=x<=b,c<=y<=d中有多少gcd(x,y)=K的(x,y).a,b,c,d,K<=50000. 这大概是入门题辣..这里记 ...
Google Protocol Buffer 的使用(一)
一.什么是Google Protocol Buffer下面是官网给的解释:Protocol buffers are a language-neutral, platform-neutral exten ...
Just a Hook-HDU1698(线段树求区间)
http://acm.hdu.edu.cn/showproblem.php?pid=1698 Problem Description In the game of DotA, Pudge’s meat ...
Sql批量添加，批量查询，批量删除，批量修改。mybatis都有对应标签
Sql批量添加,批量查询,批量删除,批量修改.mybatis都有对应标签
ATM取款机模拟——数据结构课设
今天帮人写的第二篇课设 . ;-) 机智的窝要求:大概说一下吧,就是要创建一个用户(初始化一账户),模拟ATM的业务(取款,100的整数倍,改密码,查剩余金额.等等,各 ...
Android源代码文件夹结构说明
在学习Android的过程中,学习写应用还好.一開始不用管太多代码.直接调用函数就能够了,可是工作中却须要改动到framework之类的东东所以感觉開始纠结了,又是初学,非常多不懂,所以就去找了关于 ...
Android自己定义无下划线ClickableSapn超链接文本样式
近期在做评论的时候须要实现这样的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamF2X2ltYmE=/font/5a6L5L2T/fontsize/ ...
npm won't install packages “npm ERR! network tunneling socket could not be established, cause=Parse Error”
昨天在使用npm安装react-native的时候一直报网络不能connection,可是在浏览器中直接访问时是成功,搜索百度无果,最后在google中找到了这个解决方案:http://stackov ...
【OI】关于快速幂的简单理解
都知道算某个数的幂需要线性的复杂度,为了优化复杂度,就出现了所谓的快速幂. 快速幂的代码很短,但是要原理需要一点心思. 首先,我们知道, a^b = a^c * a^d (c+d=b) 那么,不就可以 ...

使用JS分页 <span> beta 1.0

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

随机推荐

热门专题