javascript ajax 仿百度分页函数
javascript ajax 仿百度分页函数
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:/***Ajax分页功能*在需要分页的地方添加*作为分页组件容器元素。*pageCount总页数*currentPage当...

复制代码 代码如下:

/**

* Ajax分页功能

* 在需要分页的地方添加<ul></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 + "' 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教程学习
热门Javascript教程学习
编程开发子分类