javascript ajax 仿百度分页函数


Posted in Javascript onOctober 29, 2013
/** 
* 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 相关文章推荐
围观tangram js库
Dec 28 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 #Javascript
javaScript实现浮点数转十六进制字符
Oct 29 #Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 #Javascript
js动态设置div的值下例子
Oct 29 #Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 #Javascript
Js获取数组最大和最小值示例代码
Oct 29 #Javascript
js 遍历json返回的map内容示例代码
Oct 29 #Javascript
You might like
德劲1103的维修打理经验
2021/03/02 无线电
php中文件上传的安全问题
2006/10/09 PHP
使用无限生命期Session的方法
2006/10/09 PHP
逐步提升php框架的性能
2008/01/10 PHP
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
Python单例模式实例详解
2017/03/01 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
性能测试工程师的面试题
2015/02/20 面试题
保密普查工作实施方案
2014/02/25 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
平安建设汇报材料
2014/12/29 职场文书
领导欢迎词范文
2015/01/26 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
教师节简报
2015/07/20 职场文书
认识实习感想
2015/08/10 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python