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变量作用域及可访问性的探讨
Nov 23 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
送你43道JS面试题(收藏)
Jun 17 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 compact 通过变量创建数组
2016/11/15 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
ECMAScript 基础知识
2007/06/29 Javascript
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
Python群发邮件实例代码
2014/01/03 Python
说一说Python logging
2016/04/15 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
python实现录音小程序
2020/10/26 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
python list多级排序知识点总结
2019/10/23 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
外国语学院毕业生自荐信
2013/10/28 职场文书
委托书样本
2014/04/02 职场文书
横幅标语大全
2014/06/17 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers