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 相关文章推荐
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
json传值以及ajax接收详解
May 24 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
深入Node TCP模块的理解
Mar 13 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与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python 装饰器深入理解
2017/03/16 Python
python模块之paramiko实例代码
2018/01/31 Python
深入浅析python with语句简介
2018/04/11 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
在校大学生个人的自我评价
2014/02/13 职场文书
中班开学寄语
2014/04/04 职场文书
中班幼儿评语大全
2014/04/30 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
会议简报格式范文
2015/07/20 职场文书
《观察物体》教学反思
2016/02/17 职场文书
python实现手机推送 代码也就10行左右
2022/04/12 Python
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android