基于前一个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. http://www.shanghaihaocong.com-WORDPRESS开发的企业主题站

    wordpress是世界上使用最多的php开源博客系统,功能强大,而且拥有众多的插件,可扩展性强. 最近,我也用它做了一个企业网站,欢迎浏览:http://www.shanghaihaocong.co ...

  2. IMAP收邮件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. silverlight 获取路径 config

    1.获取web.config配置内容: web.config default.aspx protected string InitParams { get; set; } InitParams = s ...

  4. NetCat使用手册

    简介:   在网络工具中有“瑞士军刀”美誉的NetCat(以下简称nc),在我们用了N年了至今仍是爱不释手.因为它短小精悍(这个用在它身上很适合,现在有人已经将其修改成大约10K左右,而且功能不减少) ...

  5. php字符串截取问题

    希望将一个字符串限长显示,如果该字符串超过一定长数,就截取前n个字符,后加省略号. 但是在英文和汉字混合的情况下会出现如下问题: 如果有这样一个字符串  $str="这是一个字符串" ...

  6. php全角字符转换为半角函数 实例代码

    PHP全角半角转换函数,把目前能找到的所有全角都列出来了一个个替换吧. 之前试过网上找的通过ASCII之类的字符替换,发现很多莫名其妙的问题.最后还是换成下面的字符替换方式了,把目前能找到的所有全角都 ...

  7. 电商、商城类APP常用标签"hot"--第三方开源--LabelView

    LabelView是在github上一个开源的标签库.其项目主页是:https://github.com/linger1216//labelview LabelView为一个TextView,Imag ...

  8. windows7安装IE11点击图标没反应

    可以通过修改 Windows 注册表的方式解决: Win+R 打开“运行”后输入 regedit 打开 注册表编辑器 打开注册表编辑器(regedit)以后,找到注册表项HKEY_CURRENT_US ...

  9. python爬取网站数据

    开学前接了一个任务,内容是从网上爬取特定属性的数据.正好之前学了python,练练手. 编码问题 因为涉及到中文,所以必然地涉及到了编码的问题,这一次借这个机会算是彻底搞清楚了. 问题要从文字的编码讲 ...

  10. android ptl

    Gerrit android update sdk --no-uiadb logcat MyActivity:* *:S Connecting adb over Wi-Fiadb tcpip 5555 ...