心扬JS分页函数代码


Posted in Javascript onSeptember 10, 2010
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS分页</title> 
<style type="text/css"> 
body{font-size:12px;} 
#pager{ height:20px; float:left;} 
#pager a{height:18px; line-height:18px; border:1px solid #ccc; padding-left:0.4em; padding-right:0.4em; text-decoration:none; display:block; float:left; margin:0px 3px;} 
#pager a:hover{background-color:#1f3a87; color:#fff; text-decoration:none;} 
.not-current{background-color:#fff; color:#1f3a87;} 
.current{background-color:#1f3a87; color:#fff; text-decoration:none;} 
</style> 
</head> 
<body onload="CreatePager(10,10,2043,'?page=14',10)"> 
<script type="text/javascript"> 
//pageSize,每页显示多少条记录,currentPage当前页,recordCount共有多少条记录,url页面路径,必须带有page参数,numCount,每页显示多少个分页数字 
var CreatePager=function(pageSize,currentPage,recordCount,url,numCount){ 
//创建一个链接 
var CreateHref=function(url,page,p_ele,t,currentPage){ 
var a=document.createElement('a'); 
var reg=new RegExp("page=\\d+"); 
url=url.replace(reg.exec(url),'page='+page) 
a.setAttribute('href',url); 
a.setAttribute('class',currentPage==page?'current':'not-current'); 
var t=document.createTextNode(t); 
a.appendChild(t); 
document.getElementById(p_ele).appendChild(a); 
} 
//计算属于哪个区间 
var GetNumArea=function(num,numCount,pageCount){ 
var currentArea=parseInt((num-1)/numCount)+1; 
var lastArea=parseInt((pageCount-1)/numCount)+1; 
this.minNum=(currentArea-1)*numCount+1; 
var tempTaxNumber=currentArea*numCount+1; 
this.maxNum=tempTaxNumber>pageCount?pageCount:tempTaxNumber; 
this.preAreaNum=currentArea<=1?1:this.minNum-1; 
this.afterAreaNum=currentArea>=lastArea?pageCount:this.maxNum+1; 
} 
var pageCount=0;//总页数 
pageCount=recordCount%pageSize===0?recordCount/pageSize:parseInt(recordCount/pageSize)+1;//总页数 
// var pager=document.getElementById('pager');//获取分页的元素 
// var pageSummary=document.createElement('span');//创建一个DIV,在里面显示第几页共几页 
// var summaryContent=document.createTextNode('第'+currentPage+'页共'+pageCount+'页'); 
// pageSummary.appendChild(summaryContent); 
// pager.appendChild(pageSummary); 
CreateHref(url,1,'pager','首页',currentPage);//添加首页链接 
CreateHref(url,new GetNumArea(currentPage,numCount,pageCount).preAreaNum,'pager','<<',currentPage);//添加前面的省略号 
//显示分页数字 开始 
var pageArea = pageCount / numCount;// 页码区间 
if(pageCount<numCount){ 
for(i=1;i<=pageCount;i++){ 
CreateHref(url,i,'pager',i,currentPage); 
} 
}else{ 
currentPage=currentPage>=pageCount?pageCount:currentPage; 
var minNum=new GetNumArea(currentPage,numCount,pageCount).minNum; 
var maxNum=new GetNumArea(currentPage,numCount,pageCount).maxNum; 
for(i=minNum;i<maxNum;i++){ 
CreateHref(url,i,'pager',i,currentPage); 
} 
} 
//显示分页数字 结束 
CreateHref(url,new GetNumArea(currentPage,numCount,pageCount).afterAreaNum,'pager','>>',currentPage);//显示分页后面的省略号 
CreateHref(url,pageCount,'pager','末页',currentPage);//添加末页链 
} 
</script> 
<div id='pager'></div> 
</body> 
</html>
Javascript 相关文章推荐
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
JavaScript中获取元素索引的函数
Sep 10 #Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 #Javascript
一些常用且实用的原生JavaScript函数
Sep 08 #Javascript
js location.replace与location.reload的区别
Sep 08 #Javascript
js中匿名函数的N种写法
Sep 08 #Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 #Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
JS在if中的强制类型转换方式
2018/07/15 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
python控制台英汉汉英电子词典
2020/04/23 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python 忽略warning的输出方法
2018/10/18 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
Python中itertools的用法详解
2020/02/07 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
收银出纳员岗位职责
2014/02/23 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
党员公开承诺事项
2014/03/25 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python