JavaScript EasyPager 分页函数


Posted in Javascript onMay 25, 2011
var EasyPager = function(wrap,pageCount,currPage){ 
var d = document 
,el = function(tag,inner,click,css){ 
tag = d.createElement(tag); 
inner && (tag.innerHTML = inner); 
click && (tag.onclick = click); 
css && (tag.className=css); 
return tag; 
} 
,append = function(parent,children,child){ 
children = [].concat(children); 
for(var i=0,j=children.length;i<j;i++){ 
child = children[i]; 
child && parent.appendChild(child); 
} 
return parent; 
} 
,easyFn = function(n){return function(){EasyPager(wrap,pageCount,n)}} 
,box = el("div"),firstPage,prevPage,lastPage,nextPage,startNum,endNum,pages= []; currPage!=1 && (firstPage = el("span","<<",easyFn(1)),prevPage = el("span","<",easyFn(currPage-1))); 
currPage!=pageCount && (lastPage = el("span",">>",easyFn(pageCount)),nextPage = el("span",">",easyFn(currPage+1))); 
(pageCount<=10) ? (startNum=1,endNum=pageCount) : (startNum=currPage-4,endNum = currPage+5,(currPage<=5) && (startNum=1,endNum=10),(currPage>=pageCount-5)&&(endNum=pageCount,startNum=pageCount-10+1)); 
for(var i=startNum;i<=endNum;i++)pages.push(el("span",i,easyFn(i),i==currPage?"currSpan":null)) 
append((wrap.innerHTML="",wrap),append(box,[firstPage,prevPage].concat(pages).concat(nextPage,lastPage))); 
};
Javascript 相关文章推荐
JavaScript 乱码问题
Aug 06 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
关于JavaScript轮播图的实现
Nov 20 Javascript
浅说js变量
May 25 #Javascript
潜说js对象和数组
May 25 #Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 #Javascript
javascript中万恶的function实例分析
May 25 #Javascript
js 页面关闭前的出现提示的实现代码
May 25 #Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 #Javascript
IE6/7/8/9不支持exec的简写方式
May 25 #Javascript
You might like
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
python列表的常用操作方法小结
2016/05/21 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python基于递归解决背包问题详解
2019/07/03 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python函数生成器原理及使用详解
2020/03/12 Python
python下载的库包存放路径
2020/07/27 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
EJB的角色和三个对象
2015/12/31 面试题
英文版网络工程师求职信
2013/10/28 职场文书
有针对性的求职自荐信
2013/11/14 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
2014年接待工作总结
2014/11/26 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL