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

随机推荐

【HDOJ3047】Zjnu Stadium（带权并查集）
题意:浙江省第十二届大学生运动会在浙江师范大学举行,为此在浙师大建造了一座能容纳近万人的新体育场. 观众席每一行构成一个圆形,每个圆形由300个座位组成,对300个座位按照顺时针编号1到300,且可以 ...
android中后一个activity传值给前一个activity的实现
前一个activity跳转到后一个activity设置code: Intent intent=new Intent(MainActivity.this,ActivityTwo.class); star ...
hdu_1085_Holding Bin-Laden Captive!_201404261008
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
Oracle 设置用户密码永不过期
--1.查看用户的proifle,一般是default select username,profile from dba_users; --2.查看概要文件(default)的密码有效期设置 sele ...
Sqlserver数据库发送邮件
目录 1. Sqlserver数据库发送邮件 1.1. 概念了解 1.2. 配置 1.3. 测试发送邮件 1.3.1. 代码测试 1.3.2. 工具测试 1.4. 查看邮件日志 1. Sqlserve ...
python的字典有些类似js对象
python的字典有些类似js对象 dict1 = {} dict1['one']= '1-one' dict1[2] = '2-tow' tinydict = {'name':'tome','cod ...
016 ppp authentication
Press RETURN to get started! Router>en Router#config t Enter configuration commands, one pe ...
win7如何更改语言教程
一.首先从桌面左下角的开始菜单中找到“控制面板”,然后打开,如下图所示: 打开电脑控制面板二.进入控制面板之后,我们再进入“时钟.语言和区域”设置,如下图所示: 电脑语言改成英文方法三.进入电脑语 ...
实战c++中的vector系列--emplace_back造成的引用失效
上篇将了对于struct或是class为何emplace_back要优越于push_back,可是另一些细节没有提及.今天就谈一谈emplace_back造成的引用失效. 直接撸代码了: #inclu ...
html5 虚拟键盘弹出挡住底部的输入框解决方案
问题描述: 我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的 ...

使用JS分页 <span> beta 1.0

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

随机推荐

热门专题