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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
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
建立动态的WML站点(三)
2006/10/09 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
菜单效果
2006/10/14 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
js实现烟花特效
2020/03/02 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Python 爬虫性能相关总结
2020/08/03 Python
幼儿园老师寄语
2014/04/03 职场文书
任命书格式
2014/06/05 职场文书
2015年纪委工作总结
2015/05/13 职场文书
创业计划书之家政服务
2019/09/18 职场文书
python数字类型和占位符详情
2022/03/13 Python
MySQL派生表联表查询实战过程
2022/03/20 MySQL
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers