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 相关文章推荐
javascript AutoScroller 函数类
May 29 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 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使用GD库创建图片缩略图的方法
2015/06/10 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
python安装教程
2018/02/28 Python
Python3实现购物车功能
2018/04/18 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
Python 控制终端输出文字的实例
2019/07/12 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
Java中实现多态的机制
2015/08/09 面试题
大学生村官典型材料
2014/01/12 职场文书
爱护公共设施的标语
2014/06/24 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
十八大观后感
2015/06/12 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL