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和jquery制作方法分享
Feb 26 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
JS Input里添加小图标的两种方法
Nov 11 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 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性能的21种方法介绍
2013/06/25 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
php常用正则函数实例小结
2016/12/29 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
python中requests模块的使用方法
2015/04/08 Python
详解Python当中的字符串和编码
2015/04/25 Python
星球大战与Python之间的那些事
2016/01/07 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python中的asyncio代码详解
2019/06/10 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
Python关于反射的实例代码分享
2020/02/20 Python
利用Python优雅的登录校园网
2020/10/21 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
机械制造专业个人的自我评价
2013/12/28 职场文书
三年级数学教学反思
2014/01/31 职场文书
基层党员对照检查材料
2014/09/24 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS