心扬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 相关文章推荐
jQuery ui 1.7更新小结
Aug 15 Javascript
Javascript 键盘keyCode键码值表
Dec 24 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
JS监听Esc 键触发事键
Apr 14 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
jQuery 源码分析笔记
2011/05/25 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
Python中几种导入模块的方式总结
2017/04/27 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
实习求职信
2013/12/01 职场文书
读书活动总结范文
2014/04/26 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
教学副校长工作总结
2015/08/13 职场文书
《鲸》教学反思
2016/02/23 职场文书
六年级作文之关于梦
2019/10/22 职场文书