jQuery实现的分页功能示例

<div class="g-cf g-pagerwp">
  <div style="visibility:hidden" class="g-pager">
  </div>
</div>

.g-cf:after {clear: both;content: "";display: table;}
.g-cf {zoom:1;}
/*分页*/
.g-pager{ text-align:center; color: #111111; font: 12px/1.5em arial,tahoma; float: right;}
.g-pager a,.g-pager input{ cursor:pointer; border:solid 1px #0f71be; padding:1px 4px; color:#0f71be; margin:0 2px; vertical-align:middle; }
.g-pager a.cur,.g-pager a:hover{ background-color:#0f71be; color:#fff}
.g-pager a.no{ border-color:#a3a3a3; color:#a3a3a3; background-color:#e4f2f9}
.g-pager span{ margin-right:10px; }
.g-pager input{ cursor:default; width:28px; padding:1px 2px; }
.g-pagerwp{ height:23px; line-height:23px;padding:5px; margin-bottom:10px; border: 1px solid #dddddd;}
.g-pagerwp .g-btn{ vertical-align:top}

<script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script>
<script src="/js/jquery.pagebar.js" type="text/javascript"></script>

/**************************/
//jquery分页栏
/**************************/
$.fn.pagebar = function(options) {
  var configs = {
    pageindex: 1,
    pagesize: 15,
    totalpage: 0,
    recordcount: 0,
    showpagecount: 4,
    onpageclick: function(pageindex) {
      return false;  //默认的翻页事件
    }
  }
  $.extend(configs, options);
  var tmp = "",
  i = 0,
  j = 0,
  a = 0,
  b = 0,
  totalpage = parseint(configs.recordcount / configs.pagesize);
  totalpage = configs.recordcount % configs.pagesize > 0 ? totalpage + 1 : totalpage;
  tmp += "<span>总记录数：" + configs.recordcount + "</span > ";
  tmp += " <span>页数：" + totalpage + "</span>";
  if (configs.pageindex > 1) {
    tmp += "<a><</a>"
  } else {
    tmp += "<a class=\"no\"><</a>"
  }
  tmp += "<a>1</a>";
  if (totalpage > configs.showpagecount + 1) {
    if (configs.pageindex <= configs.showpagecount) {
      i = 2;
      j = i + configs.showpagecount;
      a = 1;
    } else if (configs.pageindex > totalpage - configs.showpagecount) {
      i = totalpage - configs.showpagecount;
      j = totalpage;
      b = 1;
    } else {
      var k = parseint((configs.showpagecount - 1) / 2);
      i = configs.pageindex - k;
      j = configs.pageindex + k + 1;
      a = 1;
      b = 1;
      if ((configs.showpagecount - 1) % 2) {
        i -= 1
      }
    }
  }
  else {
    i = 2;
    j = totalpage;
  }
  if (b) {
    tmp += "..."
  }
  for (; i < j; i++) {
    tmp += "<a>" + i + "</a>"
  }
  if (a) {
    tmp += " ... "
  }
  if (totalpage > 1) {
    tmp += "<a>" + totalpage + "</a>"
  }
  if (configs.pageindex < totalpage) {
    tmp += "<a>></a>"
  } else {
    tmp += "<a class=\"no\">></a>"
  }
  tmp += "<input type=\"text\" /><a>go</a>"
  var pager = this.html(tmp)
  var index = pager.children('input')[0]
  pager.children('a').click(function() {
    var cls = $(this).attr('class');
    if (this.innerhtml == '<') {
      if (cls != 'no') {
        configs.onpageclick(configs.pageindex - 2)
      }
    } else if (this.innerhtml == '>') {
      if (cls != 'no') {
        configs.onpageclick(configs.pageindex)
      }
    } else if (this.innerhtml == 'go') {
      if (!isnan(index.value)) {
        var indexvalue = parseint(index.value);
        indexvalue = indexvalue < 1 ? 1 : indexvalue
        indexvalue = indexvalue > totalpage ? totalpage : indexvalue
        configs.onpageclick(indexvalue - 1)
      }
    } else {
      if (cls != 'cur') {
        configs.onpageclick(parseint(this.innerhtml) - 1)
      }
    }
  }).each(function() {
    if (configs.pageindex == parseint(this.innerhtml)) {
      $(this).addclass('cur')
    }
  })
}

$(document).ready(function() {
  //设置分页信息
  var pageoptions = {
    allowpaging: true,
    pageindex: 1,    //设置当前页码
    pagesize: 15,    //设置分页大小
    recordcount: 1092, //设置数据总数
    totalpage: 73,   //设置总页数
    showpagecount: 4,
    onpageclick: function(pageindex) {
    alert("您点击了第" + parseint(pageindex + 1) + "页");  //自定义您的翻页事件
      return false;
    }
  }
  //初始化分页栏
  $('.g-pagerwp .g-pager').css('visibility', 'visible').pagebar(pageoptions);
})