javascript ajax 仿百度分页函数

复制代码 代码如下:

  /**

  * Ajax分页功能

  * 在需要分页的地方添加<ul class="pagination"></ol>

  * 作为分页组件容器元素。

  * pageCount 总页数

  * currentPage 当前页数

  * container 带有pagination类的ol容器元素

  * loadData 用于加载数据的函数

  * version 1.0

  */

  pagination : function(pageCount, currentPage, container, loadData) {

  this.startPage = 1;

  this.endPage = pageCount;

  this.minDisplayPageCount = 5;

  var c = $(container);

  var paginationLinks = "";

  if(pageCount == 1) {

  c.css({'visibility': 'hidden'});

  return;

  }

  if(pageCount > this.minDisplayPageCount + 1) {

  if(currentPage - this.minDisplayPageCount > 0) {

  this.startPage = currentPage - this.minDisplayPageCount;

  }

  if((currentPage + this.minDisplayPageCount - 1) < pageCount) {

  this.endPage = currentPage + this.minDisplayPageCount - 1;

  } else {

  this.endPage = pageCount;

  }

  }

  paginationLinks += "<ul>";

  if(currentPage != 1) {

  paginationLinks += "<li><a id='prevpage' href='javascript:;' rel='prev'>《上一页</a></li>";

  }

  for(var i = this.startPage; i <= this.endPage; i++) {

  if(currentPage == i) {

  paginationLinks += "<li id='page_" + currentPage + "_container'><a id='page_" + i + "' class='current' href='javascript:;'>" + currentPage + "</a></li>";

  } else {

  paginationLinks += "<li id='page_" + i + "_container'><a id='page_" + i + "' href='javascript:;'>" + i + "</a></li>";

  }

  }

  if(currentPage < pageCount) {

  paginationLinks += "<li><a id='nextpage' href='javascript:;' rel='next'>下一页》</a></li>";

  }

  paginationLinks += "</ul>";

  c.html(paginationLinks);

  var links = $("#page_number ul li a");

  links.each(function(index) {

  if(!(this.innerHTML == "上一页" || this.innerHTML == "下一页")) {

  $(this).click(function(event) {

  alert(links[index].innerHTML);

  loadData(curTaskId,"","",parseInt(links[index].innerHTML));

  pagination(pageCount, parseInt(links[index].innerHTML), container, loadData);

  });

  }

  });

  var prevPage = $("#prevpage");

  var nextPage = $("#nextpage");

  c.css({'visibility': 'visible'});

  if(prevPage) {

  prevPage.click(function(event) {

  loadData(curTaskId,"","",currentPage - 1);

  pagination(pageCount, currentPage - 1, container, loadData);

  });

  }

  if(nextPage) {

  nextPage.click(function(event) {

  loadData(curTaskId,"","",currentPage + 1);

  pagination(pageCount, currentPage + 1, container, loadData);

  });

  }

  }

  loadData为加载数据的函数,这个函数需要定义一个当前页数的参数,比如:

  

复制代码 代码如下:

  var currentPage = 1;

  loadExamList(currentPage){

  //TODO

  pagination(5,currentPage,$(ul),loadExamList);

  };

  5是总页数,1是当前页数,$(ul)是要将页码按钮存放的位置,loadExamList是点击上一页、下一页或者页码的时候调用的函数。