注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一个博客

两个标题

 
 
 

日志

 
 

一个蹩脚的js分页  

2009-11-15 17:54:43|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
    一个猥琐又蹩脚的前端分页,很强大哦!不过要绑定在生成好的,并且不会改变的table上,每个tr都得有个ID,id是table的id+序号,而且初始化的时候是display:none的。。。(恩。。所以没有什么实用价值)
    我们需要传入4个参数给它:上一页按钮的id,下一页按钮的id,要分页table的id,每页显示多少条记录,用的时候就new Pagination(prov, next, id, num)即可。话不多说,代码伺候:
 // page change
var Pagination = function(prov, next, id, num) {
  // first page
  this.provButt = _gel(prov);
  // next page
  this.nextButt = _gel(next);
  // the id
  this.id = id;
  // number per page
  this.num = num;
  // first page
  this.first = 1;
  // last page
  this.last = num;
  // achieved count
  this.realNum = num;
  this.init();
};
Pagination.prototype = {
  // init
  init : function() {
    this.provButt.onclick = this.move(0);
    this.nextButt.onclick = this.move(1);
    var count = this.operDOMDown(this.id, '', this.first, this.last);
    if (count <= this.num) {
      this.provButt.style.display = 'none';
    }
    if (!_gel(this.id + (this.last + 1))) {
      this.nextButt.style.display = 'none';
    }
  },
  // move
  move : function(val) {
    var me = this;
    return function() {
      me.realNum = 0;
      if (val == 0) {
        me.realNum = me.operDOMUp(me.id, 'none', me.last, me.first);
        me.realNum = me.realNum
            + me.operDOMUp(me.id, '', me.last - me.num, me.first
                    - me.num);
        var myNum = me.realNum < me.num ? me.realNum : me.num;
        me.first = me.first - myNum;
        me.last = me.last - myNum;
        if (me.first == 1) {
          me.provButt.style.display = 'none';
        } else {
          me.provButt.style.display = '';
        }
        if (!_gel(me.id + (me.last + 1))) {
          me.nextButt.style.display = 'none';
        } else {
          me.nextButt.style.display = '';
        }
      } else {
        me.realNum = me.operDOMDown(me.id, 'none', me.first, me.last);
        me.realNum = me.realNum
            + me.operDOMDown(me.id, '', me.first + me.num, me.last
                    + me.num);
        var myNum = me.realNum < me.num ? me.realNum : me.num;
        me.first = me.first + myNum;
        me.last = me.last + myNum;
        if (_gel(me.id + (me.last + 1)) == undefined) {
          me.nextButt.style.display = 'none';
        } else {
          me.nextButt.style.display = '';
        }
        if (me.first == 1) {
          me.provButt.style.display = 'none';
        } else {
          me.provButt.style.display = '';
        }
      }
    };
  },
  // move down
  operDOMDown : function(id, display, begin, end) {
    var count = 0;
    for (var i = begin; i <= end; i++) {
      var obj = _gel(id + i);
      if (obj) {
        count++;
        obj.style.display = display;
      }
    }
    return count;
  },
  // move up
  operDOMUp : function(id, display, begin, end) {
    var count = 0;
    for (var i = begin; i >= end; i--) {
      var obj = _gel(id + i);
      if (obj) {
        count++;
        obj.style.display = display;
      }
    }
    return count;
  }
};
这里是演示地址。
  评论这张
 
阅读(125)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017