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代码
Oct 30 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
javascript实现商品图片放大镜
Nov 28 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 Array交叉表实现代码
2010/08/05 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
PHP合并两个或多个数组的方法
2019/01/20 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
js实现多张图片延迟加载效果
2017/07/17 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
Python实现批量下载图片的方法
2015/07/08 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python AES加密模块用法分析
2017/05/22 Python
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
小学毕业家长寄语
2014/01/19 职场文书
申论倡议书范文
2014/05/13 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python
新手入门Mysql--sql执行过程
2021/06/20 MySQL