Maison > interface Web > js tutoriel > Partagez un exemple de code JavaScript qui imite la fonction de pagination Baidu

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

黄舟
Libérer: 2017-07-20 09:45:53
original
1611 Les gens l'ont consulté

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);
			});
		}
	}
Copier après la connexion

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);
};
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal