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 入门基础学习
Mar 10 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 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时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
淘宝搜索框效果实现分析
2011/03/05 Javascript
分页栏的web标准实现
2011/11/01 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
python与C互相调用的方法详解
2017/07/14 Python
Python3简单实现串口通信的方法
2019/06/12 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
教导处工作制度
2014/01/18 职场文书
服装促销活动方案
2014/02/23 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
股东协议书范本2016
2016/03/21 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python