Home > Web Front-end > JS Tutorial > Share a JavaScript sample code that imitates Baidu paging function

Share a JavaScript sample code that imitates Baidu paging function

黄舟
Release: 2017-07-20 09:45:53
Original
1629 people have browsed it

Share a JavaScript sample code that imitates Baidu paging function

/**
	  * 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);
			});
		}
	}
Copy after login

loadData is a function for loading data. This function needs to define a parameter for the current page number, for example:

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

5 is the total number of pages. The number of pages, 1 is the current page number, $(ul) is the location where the page number button is to be stored, loadExamList is the function called when the previous page, next page or page number is clicked.

The above is the detailed content of Share a JavaScript sample code that imitates Baidu paging function. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template