javascript ajax 仿百度分页函数

时间:2024-06-18 04:29:42 


/**
* 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是点击上一页、下一页或者页码的时候调用的函数。

标签:百度分页,分页函数
0
投稿

猜你喜欢

  • golang获取网卡信息操作

    2024-02-22 01:57:17
  • 基于python获取本地时间并转换时间戳和日期格式

    2021-02-23 17:30:06
  • MySQL时间设置注意事项的深入总结

    2024-01-16 04:39:52
  • Go程序性能优化及pprof使用方法详解

    2023-08-28 14:04:40
  • 安装sql server 2008时的4个常见错误和解决方法

    2024-01-22 10:24:58
  • JS异步宏队列与微队列原理区别详解

    2024-04-22 13:26:36
  • 提一个懒人需求——找遥控器的电视

    2009-03-23 18:16:00
  • PHP Document 代码注释规范

    2023-11-14 11:50:54
  • golang gorm错误处理事务以及日志用法示例

    2024-04-25 13:18:50
  • Python爬虫之超级鹰验证码应用

    2021-04-08 08:22:20
  • Python选择网卡发包及接收数据包

    2021-10-13 12:02:10
  • MySQL窗口函数OVER使用示例详细讲解

    2024-01-16 15:56:56
  • pytorch tensor计算三通道均值方式

    2022-06-26 00:02:41
  • JavaScript 回车 焦点切换

    2024-04-17 10:22:53
  • 详解Go语言如何实现二叉树遍历

    2024-04-23 09:44:10
  • 一文秒懂python中的 \\r 与 end=‘’ 巧妙用法

    2022-10-06 08:33:28
  • Python学习笔记(一)(基础入门之环境搭建)

    2021-12-26 12:51:40
  • PyTorch预训练的实现

    2021-03-29 07:18:18
  • PHP行为型模式之责任链模式

    2023-06-03 17:37:07
  • javascript生成随机大小写字母的方法

    2024-04-30 09:53:33
  • asp之家 网络编程 m.aspxhome.com