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 相关文章推荐
如何让页面加载完成后执行js
Jun 26 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
vue-test-utils初使用详解
May 23 Javascript
npm qs模块使用详解
Feb 07 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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
通过文字传递创建的图形按钮
2006/10/09 PHP
第十一节--重载
2006/11/16 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
python如何实现一个刷网页小程序
2018/11/27 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
python3 深浅copy对比详解
2019/08/12 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Python如何发送与接收大型数组
2020/08/07 Python
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
简历中自我评价范文3则
2013/12/14 职场文书
装修五一活动策划案
2014/01/23 职场文书
大课间活动实施方案
2014/03/06 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
作风建设整改方案
2014/10/27 职场文书
搬迁通知
2015/04/20 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python