javascript 仿百度分页函数

[javascript][/javascript] view plaincopy

  1. /**
  2.       * Ajax分页功能
  3.       * 在需要分页的地方添加<ul class=”pagination”></ol>
  4.       * 作为分页组件容器元素。
  5.       * pageCount 总页数
  6.       * currentPage 当前页数
  7.       * container 带有pagination类的ol容器元素
  8.       * loadData 用于加载数据的函数
  9.       * version 1.0
  10.       */
  11.     pagination : function(pageCount, currentPage, container, loadData) {
  12.         this.startPage = 1;
  13.         this.endPage = pageCount;
  14.         this.minDisplayPageCount = 5;
  15.         var c = $(container);
  16.         var paginationLinks = “”;
  17.         if(pageCount == 1) {
  18.             c.css({‘visibility’: ‘hidden’});
  19.             return;
  20.         }
  21.         if(pageCount > this.minDisplayPageCount + 1) {
  22.             if(currentPage – this.minDisplayPageCount > 0) {
  23.                 this.startPage = currentPage – this.minDisplayPageCount;
  24.             }
  25.             if((currentPage + this.minDisplayPageCount – 1) < pageCount) {
  26.                 this.endPage = currentPage + this.minDisplayPageCount – 1;
  27.             } else {
  28.                 this.endPage = pageCount;
  29.             }
  30.          }
  31.         paginationLinks += “<ul>”;
  32.          if(currentPage != 1) {
  33.             paginationLinks += “<li><a id=’prevpage’ href=’javascript:;’ rel=’prev’>《上一页</a></li>”;
  34.         }
  35.         for(var i = this.startPage; i <= this.endPage; i++) {
  36.             if(currentPage == i) {
  37.                 paginationLinks += “<li id=’page_” + currentPage + “_container’><a id=’page_” + i + “‘ class=’current’ href=’javascript:;’>” + currentPage + “</a></li>”;
  38.             } else {
  39.                 paginationLinks += “<li id=’page_” + i + “_container’><a id=’page_” + i + “‘ href=’javascript:;’>” + i + “</a></li>”;
  40.             }
  41.         }
  42.         if(currentPage < pageCount) {
  43.             paginationLinks += “<li><a id=’nextpage’ href=’javascript:;’ rel=’next’>下一页》</a></li>”;
  44.         }
  45.         paginationLinks += “</ul>”;
  46.         c.html(paginationLinks);
  47.         var links = $(“#page_number ul li a”);
  48.         links.each(function(index) {
  49.             if(!(this.innerHTML == “上一页” || this.innerHTML == “下一页”)) {
  50.                 $(this).click(function(event) {
  51.                     alert(links[index].innerHTML);
  52.                     loadData(curTaskId,””,””,parseInt(links[index].innerHTML));
  53.                     pagination(pageCount, parseInt(links[index].innerHTML), container, loadData);
  54.                 });
  55.             }
  56.         });
  57.         var prevPage = $(“#prevpage”);
  58.         var nextPage = $(“#nextpage”);
  59.         c.css({‘visibility’: ‘visible’});
  60.         if(prevPage) {
  61.             prevPage.click(function(event) {
  62.                 loadData(curTaskId,””,””,currentPage – 1);
  63.                 pagination(pageCount,  currentPage – 1, container, loadData);
  64.             });
  65.         }
  66.         if(nextPage) {
  67.             nextPage.click(function(event) {
  68.                 loadData(curTaskId,””,””,currentPage + 1);
  69.                 pagination(pageCount, currentPage + 1, container, loadData);
  70.             });
  71.         }
  72.     }

 

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

var  currentPage  = 1;

loadExamList(currentPage){

//TODO

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

};

 

 

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

标签