当前位置：Gxlcms > JavaScript > javascriptajax仿百度分页函数_javascript技巧

javascriptajax仿百度分页函数_javascript技巧

时间：2021-07-01 10:21:17 帮助过：7人阅读

代码如下:

 
/** 
* Ajax分页功能 
* 在需要分页的地方添加 
* 作为分页组件容器元素。 
* 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 += ""; 
if(currentPage != 1) { 
paginationLinks += "《上一页
"; 
} 
for(var i = this.startPage; i <= this.endPage; i++) { 
if(currentPage == i) { 
paginationLinks += "" + currentPage + "
"; 
} else { 
paginationLinks += "" + i + "
"; 
} 
} 
if(currentPage < pageCount) { 
paginationLinks += "下一页》
"; 
} 
paginationLinks += ""; 
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是点击上一页、下一页或者页码的时候调用的函数。

javascriptajax仿百度分页函数_javascript技巧

人气教程排行