Partagez un exemple de code JavaScript qui imite la fonction de pagination Baidu

Partagez un exemple de code JavaScript imitant la fonction de pagination Baidu

/**
	  * 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 est une fonction de chargement de données. Cette fonction doit définir un paramètre du numéro de page actuel, tel que :

<.>

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

5 est le nombre total de pages, 1 est le numéro de la page actuelle, $(ul) est l'emplacement où le bouton du numéro de page doit être stocké et loadExamList est la fonction appelée lorsque la page précédente, la page suivante ou le numéro de page est cliqué.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!