基于前一个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. HTML5 对于手机页面长按会粘贴复制的禁用 (解决方案)

    解决方案: 直接在CSS 文件中添加下面的代码,就可以实现了在手机端禁止粘贴复制的功能: *{    -webkit-touch-callout:none;  /*系统默认菜单被禁用*/    -we ...

  2. while循环中不支持循环使用curl

    <?php $link = mysql_connect('localhost', 'sms', 'sms'); mysql_select_db('sms', $link); mysql_quer ...

  3. (转)浅谈HTML5与css3画饼图!

    神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...

  4. 【php学习之路】字符串操作

           无论学习那种语言,字符串操作都是必备的基础.学php的时候总是会不知不觉的与C#比较,用起来总觉得怪怪的没有那么顺手,有些命名也差别很大,再加上很多函数命名是简写形式不百度下还真不知道什 ...

  5. Firebird 修改表名

    UPDATE RDB$RELATIONS SET  RDB$RELATION_NAME='NEWNAME' where RDB$RELATION_NAME='OLDNAME'; UPDATE RDB$ ...

  6. STM32F0xx_DMA收发USART数据配置详细过程

    前言 关于DMA(Direct Memory Access)的功能,前面关注我微信的人应该知道,其实我已经在F1芯片上简单讲了一下.有网友要求在F0讲解一下使用DMA收发串口数据.今天就应网友要求总结 ...

  7. S3C2440 LCD驱动(FrameBuffer)实例开发<一>(转)

    1. 背景知识 在多媒体的推动下,彩色LCD越来越多地应用到嵌入式系统中,PDA和手机等大多都采用LCD作为显示器材,因此学习LCD的应用很有实际意义! LCD工作的硬件需求:要使一块LCD正常的显示 ...

  8. 创业日记-关于学习Python

    2015年7月2日 深圳 阴天 学习Python有一个月了,总整感觉Python是一个比较小而灵活的语言. 为什么要学习Python 今年我已入行有9年了,一直在写C#,关于微软的集成环境也用的比较顺 ...

  9. 【Django】Apache上运行多个Django项目

    运行单个项目的步骤参考:这里 1 安装环境 操作系统:Ubuntu 12.04 LTS 32 位(安装在VMware虚拟机中) python 版本: Python 2.7.3 Django版本 > ...

  10. opengl基础学习专题 (二) 点直线和多边形

    题外话 随着学习的增长,越来越觉得自己很水.关于上一篇博文中推荐用一个 学习opengl的 基于VS2015的 simplec框架.存在 一些问题. 1.这个框架基于VS 的Debug 模式下,没有考 ...