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 相关文章推荐
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
微信小程序实现评论功能
Nov 28 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
Vue之Watcher源码解析(2)
2017/07/19 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
python numpy 显示图像阵列的实例
2018/07/02 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
党员剖析材料范文
2014/09/30 职场文书
学校运动会加油词
2015/07/18 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android
python数字图像处理:图像的绘制
2022/06/28 Python