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);})