javascript ajax 仿百度分页函数_javascript技巧
程序员文章站
2022-05-13 17:05:53
...
复制代码 代码如下:
/**
* Ajax分页功能
* 在需要分页的地方添加
- 《上一页 ";
- " + currentPage + " ";
- " + i + " ";
- 下一页》 ";
* 作为分页组件容器元素。
* 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) this.endPage = currentPage + this.minDisplayPageCount - 1;
} else {
this.endPage = pageCount;
}
}
paginationLinks += "
- ";
if(currentPage != 1) {
paginationLinks += "
}
for(var i = this.startPage; i if(currentPage == i) {
paginationLinks += "
} else {
paginationLinks += "
}
}
if(currentPage 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是点击上一页、下一页或者页码的时候调用的函数。
推荐阅读
-
JavaScript EasyPager 分页函数_javascript技巧
-
JS获取dom 对象 ajax操作 读写cookie函数_javascript技巧
-
javascript ajax 仿百度分页函数_javascript技巧
-
JS获取dom 对象 ajax操作 读写cookie函数_javascript技巧
-
javascript AOP 实现ajax回调函数使用比较方便_javascript技巧
-
js实现ASP分页函数 HTML分页函数_javascript技巧
-
js实现仿百度瀑布流的方法_javascript技巧
-
JS仿百度搜索自动提示框匹配查询功能_javascript技巧
-
js仿百度有啊通栏展示效果实现代码_javascript技巧
-
Javascript实现的分页函数_javascript技巧