心扬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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
如何在JavaScript中等分数组的实现
Dec 13 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计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
js有序数组的连接问题
2013/10/01 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
javascript基本算法汇总
2016/03/09 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
js实现聊天对话框
2020/02/08 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python去掉行尾的换行符方法
2017/01/04 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
python 画条形图(柱状图)实例
2020/04/24 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
社团文化节邀请函
2014/01/10 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
教师岗位职责范本
2015/04/02 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
电影雷锋观后感
2015/06/10 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python