基于前一个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. 解决Linux中遇到No such device

    虚拟机备份转移后,网络启动异常,提示“SIOCSIFADDR: No such device” he problem lies in the fact that ethernet MAC addres ...

  2. FusionCharts X轴显示方式

    本文摘自ITYPE 网站的wangxiao5530 原文网址为:http://wangxiao5530.iteye.com/blog/1454200 1)Wrap Mode (换行模式) <ch ...

  3. MongoDB数据库的主从配对与迁移示例

    数据中心在运行中有可能遇到各种硬件.电力.网络故障等问题,需要设计良好的系统来隔离,尽量减少对上层应用的影响,持续对外提供服务:一旦发生业务中断,也应尽快恢复.通过主从备份设计,在主应用系统发生故障时 ...

  4. php输出utf-8格式

    header("Content-type:text/html;charset=utf-8"); 输出数据前插入以上代码,以utf-8格式输出,避免乱码

  5. 15)Java &和&&

    &,双目运算符:将两个表达式的值按二进制位展开,对应的位(bit)按值进行"与"运算,结果保留在该位上- 比如170&204对应二进制就是      1010101 ...

  6. Laravel 5 基础(十一)- 子视图和表单复用

    我们需要处理编辑文章的问题.当然我们可以手工添加新的路由,就像这样: Route::get('/articles/{id}/edit', 'ArticleController@edit'); 让我们在 ...

  7. js8月-4号,,思想

    1.js使用观察者模式,做异步编程.面向事件编程. 2.事件执行 (1)用户触发事件(2)定时执行 作业:选项卡,导航栏.

  8. 对"使用Mono Runtime Bundle制作安装包让C#桌面应用程序脱离net framework"增加说明

    http://www.cnblogs.com/basilwang/archive/2011/11/29/2267809.html 想做独立引用的估计都看过这一篇文章,但是因为软件更新,很多地方已经不适 ...

  9. 决策树的基本ID3算法

    一  ID3算法的大致思想 基本的ID3算法是通过自顶向下构造决策树来进行学习的.我们首先思考的是树的构造从哪里开始,这就涉及到选择属性进行树的构造了,那么怎样选择属性呢?为了解决这个问题,我们使用统 ...

  10. 《高性能javascript》读书笔记:P1减少跨作用域的变量访问

    前端优化,有两个意义:1.为了让用户在浏览网页时获得更好的体验 2.降低服务器端的访问压力,节省网络流量. 除了换个好主机连上个千兆网这样的硬件问题,优化部分的实现方式目前也大致两种,一种是页面级别的 ...