Teilen Sie einen JavaScript-Beispielcode, der die Paging-Funktion von Baidu imitiert

Teilen Sie einen Beispielcode für JavaScript, der die Baidu-Paging-Funktion imitiert

/**
	  * 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 ist eine Funktion zum Laden von Daten. Diese Funktion muss einen Parameter der aktuellen Seitennummer definieren, wie zum Beispiel:

var  currentPage  = 1;
loadExamList(currentPage){
  //TODO
  pagination(5,currentPage,$(ul),loadExamList);
};

5 ist die Gesamtzahl der Seiten, 1 ist die aktuelle Seitenzahl, $(ul) ist der Ort, an dem die Seitenzahl-Schaltfläche gespeichert werden soll, und LoadExamList ist die Funktion, die aufgerufen wird, wenn die vorherige Seite, die nächste Seite angezeigt wird oder Seitenzahl angeklickt wird.

Das obige ist der detaillierte Inhalt vonTeilen Sie einen JavaScript-Beispielcode, der die Paging-Funktion von Baidu imitiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!