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下用eval生成JSON对象
Sep 17 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
JS匿名函数实例分析
Nov 26 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
JS函数节流和函数防抖问题分析
Dec 18 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
Vue实现附件上传功能
May 28 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Selenium的使用详解
2018/10/19 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
员工工作表扬信范文
2014/01/13 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
中学清明节活动总结
2014/07/04 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
送达通知书
2015/04/25 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle