基于前一个js分页，我将代码改成一个面向对象版的js分页，代码如下

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

a{

    margin: 5px;

}

</style>

<title>分页</title>

<script type="text/javascript">

window.onload=function(){

    new page(

        {id:'div1',

        nowNum:8,

        allNum:10,

        callback:function(now,all){

            alert('当前页：'+now+','+'总共'+all+'页')

        }

        }

    )

}

function page(json){

    this.json=json;

    if(!this.json.id){

        return false

    }

    this.obj=null;

    this.nowNum=null;

    this.allNum=null;

    this.callback=null;

    var _this=this;

    this.obj=document.getElementById(this.json.id);

    this.nowNum=this.json.nowNum||1;

    this.allNum=this.json.allNum||5;

    this.callback=this.json.callback||function(){};

    if(this.nowNum >3 && this.allNum >5){

        var oA=null;

        this.oA=document.createElement('a');

        this.oA.href="#"+1;

        this.oA.innerHTML="首页";

        this.obj.appendChild(this.oA)

    }

    if(this.nowNum>1){

        var oA=null;

        this.oA=document.createElement('a');

        this.oA.href="#"+(this.nowNum-1);

        this.oA.innerHTML="上一页";

        this.obj.appendChild(this.oA)

    }

    if(this.allNum<=5){

        for(var i=0;i<this.allNum;i++){

            var oA=null;

            this.oA=document.createElement('a');

            this.oA.href='#'+(i+1);

            if(this.nowNum==i){

                this.oA.innerHTML=(i+1);

            }else{

                this.oA.innerHTML='['+ (i+1) +']';

            }

            this.obj.appendChild(this.oA);

        }

    }else{

        for(var i=1;i<=5;i++){

            var oA=null;

            this.oA=document.createElement('a');

            if(this.nowNum==1||this.nowNum==2){

                this.oA.href='#'+i;

                this.oA.innerHTML='['+i+']';

                if(this.nowNum==i){

                    this.oA.innerHTML=i

                }

            }else if((this.allNum - this.nowNum) == 0||(this.allNum - this.nowNum == 1)){

                this.oA.href='#'+(this.allNum-5+i);

                if(this.allNum - this.nowNum==0 && i==5){

                    this.oA.innerHTML=(this.allNum-5+i);

                }else if(this.allNum - this.nowNum==1 && i==4){

                    this.oA.innerHTML=(this.allNum-5+i);

                }else{

                    this.oA.innerHTML='['+(this.allNum-5+i)+']';

                }

            }else{

                this.oA.href = '#' + (this.nowNum - 3 + i);

                if(i==3){

                    this.oA.innerHTML=(this.nowNum-3+i);

                }else{

                    this.oA.innerHTML='['+(this.nowNum-3+i)+']';

                }

            }

            this.obj.appendChild(this.oA);

        }

    }

    if((this.allNum - this.nowNum) > 0){

        var oA=null;

        this.oA=document.createElement('a');

        this.oA.href='#'+(this.nowNum+1);

        this.oA.innerHTML = '下一页';

        this.obj.appendChild(this.oA);

    }

    if((this.allNum - this.nowNum)>2){

        var oA=null;

        this.oA=document.createElement('a');

        this.oA.href='#'+this.allNum;

        this.oA.innerHTML = '尾页'

        this.obj.appendChild(this.oA);

    }

    this.callback(this.nowNum,this.allNum);

    var aA=null;

    this.aA=this.obj.getElementsByTagName('a');

    for(var i=0;i<this.aA.length;i++){

        var _this=this;

        this.aA[i].onclick=function(){

            _this.change(this);

        };

    }

}

page.prototype.change=function(btn){

            var nowNum=null;

            this.nowNum = parseInt(btn.getAttribute('href').substring(1));

            this.obj.innerHTML='';

            new page(

                {

                    id:    this.json.id,

                    nowNum:this.nowNum,

                    allNum:this.allNum

                }

            )

}

</script>

</head>

<body>

<div id="div1">

    <!-- <a href="#1">1</a>

    <a href="#1">2</a>

    <a href="#1">3</a>

    <a href="#1">4</a>

    <a href="#1">5</a> -->

</div>

</body>

</html>

面向对象版js分页的更多相关文章

  1. Bootstrap的js分页插件属性介绍

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定 制,提供了公共的方法可随时获得插件状 ...

  2. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  3. 前端—我的第一篇博客 梦开始的地方（面向对象版tab栏）

    这是我的第一篇博客 博客生涯才开始 但是人生已经过去了二十个年头了 才开始弄这个 也没搞得太懂 我原本的想法是想搞个源代码上来 但是看了半天好像就只能传html源代码 那我还有css js的部分呢 我 ...

  4. js分页小结

     今天解决了JS分页的问题1 页码 给每页的内容套一个相同的类名 通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...

  5. 【面向对象版】HashMap（增删改查）

    前言: 关于什么是HashMap,HashMap可以用来做些什么,这些定义类的描述,请参照[简易版]HashMap(增删改查)的内容. 这章节主要是面向实例,直接进行HashMap(增删改查)的演示. ...

  6. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

  7. jsp、js分页功能的简单总结

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...

  8. 一个重构的js分页类

    // JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...

  9. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

随机推荐

  1. 最新CSS3常用30种选择器总结(适合初学者)

     1. *:通用元素选择器 * { margin: 0; padding: 0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除默认C ...

  2. css半透明

    filter:alpha(opacity=80); /*支持 IE 浏览器*/-moz-opacity:0.80; /*支持 FireFox 浏览器*/opacity:0.80; /*支持 Chrom ...

  3. JDBC基础一

    JDBC:java database connectivity SUN公司提供的一套操作数据库的标准规范. JDBC与数据库驱动的关系:接口与实现的关系. JDBC规范(掌握四个核心对象): Driv ...

  4. [terry笔记]dblink

    dblink在分布式数据库集群中很常见,今天简单的总结一下. db link 的命名和global_names有关,global_name是数据库全局名称,global_name在你所管理的数据库中要 ...

  5. prettyprint

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. 关于Cygwin——包管理、替换默认终端、同MSYS的比较

    (搬运自我在SegmentFault的博客) Cygwin 是一个用于 Windows 的类 UNIX shell 环境. 它由两个组件组成:一个 UNIX API 库,它模拟 UNIX 操作系统提供 ...

  7. Mybatis 中常用的java类型与jdbc类型

    JDBC Type Java Type CHAR String VARCHAR String LONGVARCHAR String NUMERIC java.math.BigDecimal DECIM ...

  8. 7.Knockout.Js（Mapping插件）

    前言 Knockout设计成允许你使用任何JavaScript对象作为view model.必须view model的一些属性是observable的,你可以使用KO绑定他们到你的UI元素上,当这些o ...

  9. SQL Server Analysis Services 数据挖掘

    假如你有一个购物类的网站,那么你如何给你的客户来推荐产品呢?这个功能在很多 电商类网站都有,那么,通过SQL Server Analysis Services的数据挖掘功能,你也可以轻松的来构建类似的 ...

  10. iOS进阶学习-数据库

    一.数据库管理系统 1.SQL语言概述:SQL是Structured Query Language(结构化查询语言)的缩写.SQL是专为数据库而建立的操作命令集,是一种功能齐全的数据库语言. 2.常见 ...