JavaScript EasyPager 分页函数

 更新时间:2011年05月25日 21:51:27   作者:  
好久不写js,手都有点生了。写个小东西热手。
复制代码 代码如下:

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中forEach和map详细讲解

    JavaScript中forEach和map详细讲解

    foreach和map都是JavaScript中数组的常用方法,它们都可以对数组中的每个元素执行一个函数,但是它们有一些区别,下面这篇文章主要给大家介绍了关于JavaScript中forEach和map详细讲解的相关资料,需要的朋友可以参考下
    2023-11-11
  • js实现仿qq消息的弹出窗效果

    js实现仿qq消息的弹出窗效果

    这篇文章主要介绍了js实现仿qq消息的弹出窗效果,文章代码实现模拟qq弹出框消息提醒,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • js GridView 实现自动计算操作代码

    js GridView 实现自动计算操作代码

    js操作GridView,实现自动计算的实现代码,下面的代码运行即可
    2009-03-03
  • require导入module.exports 或 exports导出的使用方法

    require导入module.exports 或 exports导出的使用方法

    module.exports用于导出整个模块的内容,可以通过赋值给 module.exports 导出一个对象、函数或值,导出的内容可以被其他模块通过require 导入,本文给大家介绍require导入module.exports 或 exports导出的使用,感兴趣的朋友一起看看吧
    2023-11-11
  • axios拦截器机制的实现原理详解

    axios拦截器机制的实现原理详解

    axios 不仅提供了一套跨平台请求,另外还提供了“拦截器”这一中间件机制,方便你在请求之前、响应之后做些操作处理,本文给大家详细介绍了axios 拦截器机制是如何实现的,需要的朋友可以参考下
    2024-05-05
  • 浅谈Webpack 是如何加载模块的

    浅谈Webpack 是如何加载模块的

    这篇文章主要介绍了Webpack 是如何加载模块的,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • seajs和requirejs模块化简单案例分析

    seajs和requirejs模块化简单案例分析

    这篇文章主要介绍了seajs和requirejs模块化,结合具体案例形式分析了seaj和requirejs模块化应用的相关操作技巧与使用注意事项,需要的朋友可以参考下
    2019-08-08
  • 梳理总结JavaScript的23个String方法

    梳理总结JavaScript的23个String方法

    文章主要介绍了梳理总结JavaScript的23个String方法,JavaScript 中的String类型用于表示文本型的数据。它是由无符号整数值作为元素而组成的集合,更多详细内容需要的朋友可以参考一下
    2022-07-07
  • javascript实现下雨效果

    javascript实现下雨效果

    本文主要介绍了javascript实现下雨效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript实现邮箱地址自动匹配功能代码

    JavaScript实现邮箱地址自动匹配功能代码

    这篇文章主要为大家详细介绍了JavaScript实现E-mail邮箱地址自动匹配功能代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11

最新评论