时间:2021-07-01 10:21:17 帮助过:4人阅读
- /**
- * 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({'visibility': 'hidden'});
- 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='prevpage' href='javascript:;' rel='prev'>《上一页</a></li>";
- }
- for(var i = this.startPage; i <= this.endPage; i++) {
- if(currentPage == i) {
- paginationLinks += "<li id='page_" + currentPage + "_container'><a id='page_" + i + "' class='current' href='javascript:;'>" + currentPage + "</a></li>";
- } else {
- paginationLinks += "<li id='page_" + i + "_container'><a id='page_" + i + "' href='javascript:;'>" + i + "</a></li>";
- }
- }
- if(currentPage < pageCount) {
- paginationLinks += "<li><a id='nextpage' href='javascript:;' rel='next'>下一页》</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({'visibility': 'visible'});
- 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仿百度分页函数的示例代码 的详细内容,更多请关注Gxl网其它相关文章!