js 分页

html代码：

　　 <div id="paging_wrap" class="paging-wrap"></div> 

css代码：　

div#paging_wrap {
  padding-right: 3px;
  padding-left: 3px;
  padding-bottom: 3px;
  margin: 20px 0px;
  padding-top: 15px;;
  text-align: center
}

div#paging_wrap a {
  border: #dedfde 1px solid;
  padding-right: 6px;
  background-position: 50% bottom;
  padding-left: 6px;
  padding-bottom: 2px;
  color: #0061de;
  margin-right: 3px;
  padding-top: 2px;
  text-decoration: none
}

div#paging_wrap a:hover {
  border: #000 1px solid;
  background-image: none;
  color: #fff;
  background-color: #0061de
}

div#paging_wrap a:active {
  border-right: #000 1px solid;
  border-top: #000 1px solid;
  background-image: none;
  border-left: #000 1px solid;
  color: #fff;
  border-bottom: #000 1px solid;
  background-color: #0061de
}

div#paging_wrap span.current {
  padding-right: 6px;
  padding-left: 6px;
  font-weight: bold;
  padding-bottom: 2px;
  color: #ff0084;
  margin-right: 3px;
  padding-top: 2px
}

div#paging_wrap span.disabled {
  padding-right: 6px;
  padding-left: 6px;
  padding-bottom: 2px;
  color: #adaaad;
  margin-right: 3px;
  padding-top: 2px
}

 

js代码：

//事件基础类
(function() {
  var EventBase = function() {

    this.addListener = function(type, listener) {
      getListener(this, type, true).push(listener);
    }

    this.removeListener = function(type, listener) {
      var listeners = getListener(this, type);
      for (var i = 0; i < listeners.length; i++) {
        if (listeners[i] == listener) {
          listeners.splice(i, 1);
          return;
        }
      }
    }

    this.fireEvent = function(type) {
      var listeners = getListener(this, type), r, t, k;
      if (listeners) {
        k = listeners.length;
        while (k--) {
          t = listeners[k].apply(this, arguments);
          if (t !== undefined) {
            r = t;
          }
        }
      }
      if (t = this['on' + type.toLowerCase()]) {
        r = t.apply(this, arguments);
      }
      return r;
    }
  }

  function getListener(obj, type, force) {
    var allListeners;
    type = type.toLowerCase();
    return ((allListeners = (obj.__allListeners || force
        && (obj.__allListeners = {}))) && (allListeners[type] || force
        && (allListeners[type] = [])));
  }

  window['EventBase'] = EventBase;
})();

// 分页类
var Page = function(pageCanvas) {
  this.recordCount;
  this.pageSize;
  this.numericButtonCount;
  this.pageCanvas = pageCanvas;
  this.pageIndex = 1;
}

Page.prototype = new EventBase();

Page.prototype.getPageHtml = function() {
  this.pageCount = Math.ceil(this.recordCount / this.pageSize);
  var prev = this.pageIndex == 1 ? " <span class='disabled'>上一页</span>"
      : " <span class=''><a href='javascript:;' pageindex='"
          + (this.pageIndex - 1) + "'>上一页</a></span> ";
  var next = this.pageCount <= this.pageIndex ? " <span class='disabled'>下一页</span>"
      : " <span class='current'><a href='javascript:;' pageIndex='"
          + (this.pageIndex + 1) + "'>下一页</a></span>";
  var first = this.pageIndex == 1 ? "<span class='current'>1</span>..."
      : "<span><a href='javascript:;' pageindex='1'>1</a></span>...";
  var last = this.pageCount <= this.pageIndex ? "...<span class='current'>"
      + this.pageCount + "</span>"
      : "...<span><a href='javascript:;' pageindex='" + (this.pageCount) + "'>"
          + this.pageCount + "</a></span>";
  var pageStr = ""

  var pageMathIndex = Math.floor(this.numericButtonCount / 2);
  var pageStartIndex;
  var pageEndIndex;

  if (this.pageCount < this.numericButtonCount) {
    pageStartIndex = 1
    pageEndIndex = this.pageCount;
  } else {
    if (this.pageCount - pageMathIndex < this.pageIndex) {
      pageStartIndex = this.pageCount - this.numericButtonCount + 1;
      pageEndIndex = this.pageCount;
    } else {
      if (this.pageIndex - pageMathIndex < 1) {
        pageStartIndex = 1;
        pageEndIndex = this.numericButtonCount;
      } else {
        pageStartIndex = this.pageIndex - pageMathIndex;
        pageEndIndex = this.pageIndex + pageMathIndex;
      }
    }

  }

  for (var i = pageStartIndex; i <= pageEndIndex; i++) {
    if (this.pageIndex == i)
      pageStr += " <span class='current'>" + i + "</span>"
    else
      pageStr += " <span><a href='javascript:;' pageindex='" + i + "'>" + i
          + "</a></span>";
  }

  if (pageStartIndex == 1)
    first = '';
  if (pageEndIndex == this.pageCount)
    last = '';
  // pageStr = first + prev + pageStr + next + last;
  pageStr = prev + first + pageStr + last + next;
  return pageStr;
}

Page.prototype.onPageChanged = function(pageIndex) {
  this.pageIndex = pageIndex;
  this.fireEvent('pageChanged');
}

Page.prototype.pageEvent = function(page) {
  this.onclick = function(e) {
    e = e || window.event;
    t = e.target || e.srcElement;
    if (t.tagName == "A")
      page.onPageChanged(parseInt(t.getAttribute("pageindex")));
  }
}

Page.prototype.render = function() {
  var pageCanvas = document.getElementById(this.pageCanvas);
  pageCanvas.innerHTML = this.getPageHtml();
  this.pageEvent.call(pageCanvas, this);
}

Page.prototype.initialize = function() {
  this.onPageChanged(this.pageIndex);
}

function pageInit() {

    var p = new Page( 'paging_wrap' );
    //总记录数
    p.recordCount = selectDtzyCount();
    //分页按扭数
    p.numericButtonCount = 10;
    //每页记录数
    p.pageSize = 5;
    //当点击分页时触发此事件。 一些外加的效果可以放在此处， 如加载数据
    p.addListener( 'pageChanged', function() {
      //列表内容
      init(p.pageIndex, p.pageSize);
      p.render();
    } );
    p.initialize();
}