心扬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 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
javascript面向对象编程代码
Dec 19 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
js实现拖拽效果
Feb 12 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
Javascript动画效果(3)
Oct 11 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
vue实现数字滚动效果
Jun 29 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
火车头采集器3.0采集图文教程
2007/03/17 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
python自动点赞功能的实现思路
2020/02/26 Python
Python中的流程控制详解
2021/02/18 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
保时捷设计:Porsche Design
2019/03/30 全球购物
音乐教学案例
2014/01/30 职场文书
《刷子李》教学反思
2016/02/20 职场文书
离婚协议书格式范本
2016/03/18 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
Promise静态四兄弟实现示例详解
2022/07/07 Javascript