使用JS分页 <span> beta 3.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{

                /**display:inline;

                width:100px;*/

                margin-left:50px;

            }

            #pageDiv{

                width:500px;

                margin-left:420px;

                margin-top:20px;

                /**background-color:gold;*/

            }

            #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="doUp();">上一页</span>

        <span onclick="doNext();">下一页</span><span onclick="doLast();">尾页</span>

            <input id="goPage" style="width:20px"/><span onclick="doGo();">GO</span>

        <!--

            <input type="button" onclick="doFirst();" value="首页"></input><input type="button" onclick="doUp();"  value="上一页"></input>

        <input type="button" onclick="doNext();"  value="下一页"></input><input type="button" onclick="doLast();"  value="尾页"></input>

            <input id="goPage" style="width:20px"/><input type="button" onclick="doGo();" value="GO"></input>

        </div>

        -->

        <a href="#" onclick="pageModel.doFirst();" >首页</a>

        <a href="#" onclick="pageModel.doUp();" >上一页</a>

        <a href="#" onclick="pageModel.doNext();" >下一页</a>

        <a href="#" onclick="pageModel.doLast();" >尾页</a>

        <input id="goPage" style="width:20px"/><a href="#" onclick="pageModel.doGo();" >GO</a>

        <!--

            有时候，页面打开后，source里没有元素内容，是因为当前的页面仍处于编辑状态，未保存，保存后，会正常显示

        -->

    </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(10000+i,'zs'+i,20+i,'男'));

            }

        }

</script>

<script>

    var contentDiv=document.getElementById("contentDiv");

    /**

        数据源 显示位置 每页显示几个 当前页

        可以把下面方法 封装到分页模型，实现通用性

        如果是table，如何实现分页功能？

    */

    //分页模型

    function PageModel(){

        this.cunPage;//当前页

        this.pageContent;//一页显示多少个

        this.totalNum;//总记录数

        this.totalPage=function (){

                return Math.ceil(this.totalNum/this.pageContent);

        }

        this.doFirst=function (){     //首页

            pageModel.cunPage=1;

            contentDiv.innerHTML=doShow(pageModel.cunPage,stus);

        }

        this.doUp=function (){      //上一页

            if(pageModel.cunPage<=1){

                return ;

            }

            pageModel.cunPage--;

            contentDiv.innerHTML=doShow(pageModel.cunPage,stus);

        }

        this.doNext=function (){    //下一页

            if(pageModel.cunPage>=pageModel.totalPage()){

                return ;

            }

            pageModel.cunPage++;

            contentDiv.innerHTML=doShow(pageModel.cunPage,stus);

        }

        this.doLast=function (){    //最后一页

            pageModel.cunPage=pageModel.totalPage();

            contentDiv.innerHTML=doShow(pageModel.cunPage,stus);

        }

        this.doGo=function (){      //跳转

            var goPage =parseInt(document.getElementById("goPage").value);

            if(goPage<1||goPage>pageModel.totalPage()){

                return ;

            }

            pageModel.cunPage=parseInt(goPage);

            contentDiv.innerHTML=doShow(pageModel.cunPage,stus);

        }

    }

    //插入显示

    function doShow(CurrentPage,stus){

        var start=(CurrentPage-1)*pageModel.pageContent;

        var end=CurrentPage*pageModel.pageContent;

        var s="";

        for(var i=start;i<end;i++){

                if(stus[i]!=null){

                    s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'

                    +stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';

                }

        }

        return s;

    }

</script>

<script>

    init();

    var pageModel=new PageModel();

    pageModel.pageContent=10;

    pageModel.totalNum=stus.length;

    pageModel.doFirst();

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

                 /**display:inline;

                 width:100px;*/

                 margin-left:50px;

             }

             #pageDiv{

                 width:500px;

                 margin-left:420px;

                 margin-top:20px;

                 /**background-color:gold;*/

             }

             #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="doUp();">上一页</span>

         <span onclick="doNext();">下一页</span><span onclick="doLast();">尾页</span>

             <input id="goPage" style="width:20px"/><span onclick="doGo();">GO</span>

         <!--

             <input type="button" onclick="doFirst();" value="首页"></input><input type="button" onclick="doUp();"  value="上一页"></input>

         <input type="button" onclick="doNext();"  value="下一页"></input><input type="button" onclick="doLast();"  value="尾页"></input>

             <input id="goPage" style="width:20px"/><input type="button" onclick="doGo();" value="GO"></input>

         </div>

         -->

         <a href="#" onclick="pageModel.doFirst();" >首页</a>

         <a href="#" onclick="pageModel.doUp();" >上一页</a>

         <a href="#" onclick="pageModel.doNext();" >下一页</a>

         <a href="#" onclick="pageModel.doLast();" >尾页</a>

         <input id="goPage" style="width:20px"/><a href="#" onclick="pageModel.doGo();" >GO</a>

         <!--

             有时候，页面打开后，source里没有元素内容，是因为当前的页面仍处于编辑状态，未保存，保存后，会正常显示

         -->

     </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(10000+i,'zs'+i,20+i,'男'));

             }

         }

 </script>

 <script>

     var contentDiv=document.getElementById("contentDiv");

     /**

         数据源 显示位置 每页显示几个 当前页

         可以把下面方法 封装到分页模型，实现通用性

         如果是table，如何实现分页功能？

     */

     //分页模型

     function PageModel(){

         this.cunPage;//当前页

         this.pageContent;//一页显示多少个

         this.totalNum;//总记录数

         this.totalPage=function (){

                 return Math.ceil(this.totalNum/this.pageContent);

         }

         this.doFirst=function (){     //首页

             pageModel.cunPage=1;

             contentDiv.innerHTML=doShow(pageModel.cunPage,stus);

         }

         this.doUp=function (){      //上一页

             if(pageModel.cunPage<=1){

                 return ;

             }

             pageModel.cunPage--;

             contentDiv.innerHTML=doShow(pageModel.cunPage,stus);

         }

         this.doNext=function (){    //下一页

             if(pageModel.cunPage>=pageModel.totalPage()){

                 return ;

             }

             pageModel.cunPage++;

             contentDiv.innerHTML=doShow(pageModel.cunPage,stus);

         }

         this.doLast=function (){    //最后一页

             pageModel.cunPage=pageModel.totalPage();

             contentDiv.innerHTML=doShow(pageModel.cunPage,stus);

         }

         this.doGo=function (){      //跳转

             var goPage =parseInt(document.getElementById("goPage").value);

             if(goPage<1||goPage>pageModel.totalPage()){

                 return ;

             }

             pageModel.cunPage=parseInt(goPage);

             contentDiv.innerHTML=doShow(pageModel.cunPage,stus);

         }

     }

     //插入显示

     function doShow(CurrentPage,stus){

         var start=(CurrentPage-1)*pageModel.pageContent;

         var end=CurrentPage*pageModel.pageContent;

         var s="";

         for(var i=start;i<end;i++){

                 if(stus[i]!=null){

                     s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'

                     +stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>';

                 }

         }

         return s;

     }

 </script>

 <script>

     init();

     var pageModel=new PageModel();

     pageModel.pageContent=10;

     pageModel.totalNum=stus.length;

     pageModel.doFirst();

 </script>

 </html>

使用JS分页 <span> beta 3.0 完成封装的分页的更多相关文章

使用JS分页 <span> beta 2.0 未封装的分页
<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; backgr ...
使用JS分页 <span> beta 1.0
<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; backgr ...
vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
抓取Js动态生成数据且以滚动页面方式分页的网页
代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...
发布Ext JS 5.1 beta版本
原文:Announcing Ext JS 5.1 Beta 概述我们很高兴的宣布,Ext JS 5.1 beta发布了.自从Ext JS 5.0.1,我们一直在努力添加一些令人兴奋的和一些在Senc ...
【JavaScript 封装库】BETA 5.0 测试版发布！
JavaScript 前端框架(封装库) BETA 5.0 已于10月10日正式发布,今天开始提供 BETA 5.0 的 API 参考文献.相较于之前 5 个版本的发布都是草草的提供源代码,并没有很多 ...
用Vue2.0实现简单的分页及跳转
用Vue2.0实现简单的分页及跳转 2018年07月26日 20:29:51 Freya_yyy 阅读数 3369 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...
【原创】自己动手写工具----XSmartNote [Beta 3.0]
一.前面的话在动笔之前,一直很纠结到底要不要继续完成这个工具,因为上次给它码代码还是一年多之前的事情,参考自己动手写工具----XSmartNote [Beta 2.0],这篇博文里,很多园友提出了 ...
EF Core 1.0 和 SQLServer 2008 分页的问题
EF Core 1.0 在sqlserver2008分页的时候需要指定用数字分页. EF Core1.0 生成的分页语句中使用了 Featch Next.这个语句只有在SqlServer2012的时候 ...

随机推荐

***mysql 用一个表的一列，去更新另一表的一列
需求: 老板给了一个EXCEL数据,是本人提供的一个模板,含ID,现在相当于要导入这新增的一列数据到数据库中的某一个表. 方法一:用navicat,在excel中复制一列,再粘贴到navicat中的一 ...
Python基础之二
字符编码: 二进制记录:128 64 32 16 8 4 2 1 1 1 1 1 1 1 1 1 = 8位 ascii 编码:占1个字节8位,只能表示256个符号,主要用于显示英语和其 ...
[bzoj2733][HNOI2012]永无乡_权值线段树_线段树合并
永无乡 bzoj-2733 HNOI-2012 题目大意:题目链接. 注释:略. 想法: 它的查询操作非常友善,就是一个联通块内的$k$小值. 故此我们可以考虑每个联通块建一棵权值线段树. 这样的话每 ...
动态演示冒泡排序java
动态演示冒泡排序java //冒泡排序是一种简单的交换排序,基本思路,从数列左边开始扫描元素,在扫描过程中依次对相邻元素进行比较,将较大元素后移. public class NumberSort { ...
Mac 系统引导过程概述 & BootCamp 的秘密
http://bbs.feng.com/read-htm-tid-6890655.html
neutron dhcp
neutron dhcp 采用dnsmasq服务来实现.和传统的 dhcp 一样, dhcp请求也分为4步 The client sends a discover ("I'm a clien ...
通过ambari安装hadoop集群
转载:http://www.cnblogs.com/cenyuhai/p/3295635.html 整个过程走完,问题不大,不过有一个事情要注意的是就算创建数据库的,使用localhost会报错,要使 ...
戴尔PowerEdge服务器RAID控制卡的配置
示例演示环境:PowerEdge R620 + H710p Raid控制卡 + 9 x 300G 10k SAS 硬盘 H310.H710.H810的配置方法与H710P大致相同,在此不再累述. 特 ...
007 Vlan config
sw0(config)#vlan 2 sw0(config-vlan)#name Sales sw0(config-vlan)#vlan 3 sw0(config-vlan)#name Tech sw ...
samba add new smbpasswd & recycle
建立新账号(XXXXX)的范列: sudo useradd XXXXX -m #建立本机用户且home下建文件夹 sudo smbpasswd XXXXX -a #建立samba用戶且设定密码 ...

使用JS分页 <span> beta 3.0 完成封装的分页

使用JS分页 <span> beta 3.0 完成封装的分页的更多相关文章

随机推荐

热门专题