javascript ajax 仿百度分頁函數_javascript技巧

複製程式碼如下程式碼：

/**
* Ajax分頁功能
* 在需要分頁的地方加入

* 作為分頁元件容器元素。
* pageCount 總頁數
* currentPage 目前頁數
* container 帶有pagination類別的ol容器元素
* loadData 用於載入資料的函數
* version 1.0
*/
分頁 : function( pageCount, currentPage, 容器, loadData) {
this.startPage = 1;
this.endPage = pageCount;
this.minDisplayPageCount = 5;
var c = $(容器);
var paginationLinks = "";
if(pageCount == 1) {
c.css({'visibility': 'hidden'});
回傳；
}
if(pageCount > this.minDisplayPageCount 1) {
if(currentPage - this.minDisplayPageCount > 0) {
this.startPage = currentPage -this.minDisplayPageCount;
}
if((currentPage this.minDisplayPageCount - 1) this.endPage = currentPage this.minDisplayPageCount - 1;
} else {
this.endPage = pageCount;
}
}
paginationLinks = "
";
if(currentPage != 1) {
paginationLinks = "
• 《上一頁
";
}
for(var i = this.startPage; i if(currentPage == i) {
paginationLinks = "
• " currentPage "
";
} else {
paginationLinks = "
• " 我「」；
  }
  }
  if(currentPage paginationLinks = "
• 下一頁》
";
}
paginationLinks = "
";
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));
分頁(pageCount, parseInt(links[index].innerHTML), Container, loadData)
}); var prevPage = $("#prevpage");
var nextPage = $("#nextpage") ;
c.css({'可見性': '可見'});
if(prevPage) {
prevPage.click(function(event) {
loadData(curTaskId,"", "", currentPage - 1);
分頁(pageCount, currentPage - 1,容器，載入資料）
});
}
if(nextPage) {
nextPage.click(function (event) {
loadData(curTaskId,"","",currentPage 1)
分頁(pageCount, currentPage 1 , 容器, loadData)
}
}


load載入資料的函數，函數需要定義一個目前頁數的參數，例如：

複製程式碼

程式碼如下： var currentPage = 1; loadExamList(currentPage){

//TODO

分頁(5,currentPage,$(ul),loadExamList );
}；

5是總頁數，1是目前頁數，$(ul)是虛擬頁碼按鈕存放的位置，loadExamList是點選上一頁、下一頁頁或頁碼的呼叫時的函數。