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 相关文章推荐
基于jQuery的history历史记录插件
Dec 11 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 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
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
python基础教程之面向对象的一些概念
2014/08/29 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
python实现SMTP邮件发送功能
2020/06/16 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
Python探索之Metaclass初步了解
2017/10/28 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
奥巴马竞选演讲稿
2014/05/15 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
自我评价优缺点范文
2015/03/11 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL