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 JSQL,SQL无处不在,
May 05 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 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
Zerg兵种介绍
2020/03/14 星际争霸
深入php self与$this的详解
2013/06/08 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
IE的fireEvent方法概述及应用
2013/02/22 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python中metaclass原理与用法详解
2019/06/25 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
个人简历中自我评价
2014/02/11 职场文书
异地年检委托书范本
2014/09/24 职场文书
教师工作表现自我评价
2015/03/05 职场文书
高中化学教学反思
2016/02/22 职场文书
pycharm无法安装cv2模块问题
2022/05/20 Python