分享一個JavaScript仿百度分頁函數的範例程式碼

分享一個JavaScript仿百度分頁函數的範例程式碼 

/**
	  * 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({&#39;visibility&#39;: &#39;hidden&#39;});
			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=&#39;prevpage&#39; href=&#39;javascript:;&#39; rel=&#39;prev&#39;>《上一页</a></li>";
		}
		
		for(var i = this.startPage; i <= this.endPage; i++) {
			if(currentPage == i) {
				paginationLinks += "<li id=&#39;page_" + currentPage + "_container&#39;><a id=&#39;page_" + i + "&#39; class=&#39;current&#39; href=&#39;javascript:;&#39;>" + currentPage + "</a></li>";
			} else {
				paginationLinks += "<li id=&#39;page_" + i + "_container&#39;><a id=&#39;page_" + i + "&#39; href=&#39;javascript:;&#39;>" + i + "</a></li>";
			}
		}
		
		if(currentPage < pageCount) {
			paginationLinks += "<li><a id=&#39;nextpage&#39; href=&#39;javascript:;&#39; rel=&#39;next&#39;>下一页》</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({&#39;visibility&#39;: &#39;visible&#39;});
		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是點選上一頁、下一頁或頁碼的時候呼叫的函數。

以上是分享一個JavaScript仿百度分頁函數的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！