原生javascript实现的分页插件pagenav


Posted in Javascript onAugust 28, 2014

这一款是用原生javascript实现的分页插件pagenav,页码显示jquery插件,只需要存在#pageNav,则会在其中显示页码,调用时可根据需要先重写go方法.(已去除jquery依赖)。。。。

插件代码如下:

/*
 **************************
 author:Keel (keel.sike@gmail.com)
 **************************

 页码显示jquery插件,只需要存在#pageNav,则会在其中显示页码.
 调用时可根据需要先重写go方法.(已去除jquery依赖)

 **************************
 示例(注意:页面中放置id为pageNav的html对象):

 //转到页码时触发的自定义方法,p为当前页码,pn为总页数
 pageNav.fn = function(p,pn){
 alert(p+","+pn);
 };
 //初始跳到第3页,共33页
 pageNav.go(3,33);

 */
var pageNav = pageNav || {};
pageNav.fn = null;
//p为当前页码,pn为总页数
pageNav.nav = function(p, pn) {
  //只有一页,直接显示1
  if (pn <= 1) {
    this.p = 1;
    this.pn = 1;
    return this.pHtml2(1);
  }
  if (pn < p) {
    p = pn;
  };
  var re = "";
  //第一页
  if (p <= 1) {
    p = 1;
  } else {
    //非第一页
    re += this.pHtml(p - 1, pn, "上一页");
    //总是显示第一页页码
    re += this.pHtml(1, pn, "1");
  }
  //校正页码
  this.p = p;
  this.pn = pn;

  //开始页码
  var start = 2;
  var end = (pn < 9) ? pn: 9;
  //是否显示前置省略号,即大于10的开始页码
  if (p >= 7) {
    re += "...";
    start = p - 4;
    var e = p + 4;
    end = (pn < e) ? pn: e;
  }
  for (var i = start; i < p; i++) {
    re += this.pHtml(i, pn);
  };
  re += this.pHtml2(p);
  for (var i = p + 1; i <= end; i++) {
    re += this.pHtml(i, pn);
  };
  if (end < pn) {
    re += "...";
    //显示最后一页页码,如不需要则去掉下面这一句
    re += this.pHtml(pn, pn);
  };
  if (p < pn) {
    re += this.pHtml(p + 1, pn, "下一页");
  };
  return re;
};
//显示非当前页
pageNav.pHtml = function(pageNo, pn, showPageNo) {
  showPageNo = showPageNo || pageNo;
  var H = " <a href='javascript:pageNav.go(" + pageNo + "," + pn + ");' class='pageNum'>" + showPageNo + "</a> ";
  return H;

};
//显示当前页
pageNav.pHtml2 = function(pageNo) {
  var H = " <span class='cPageNum'>" + pageNo + "</span> ";
  return H;
};
//输出页码,可根据需要重写此方法
pageNav.go = function(p, pn) {
  //$("#pageNav").html(this.nav(p,pn)); //如果使用jQuery可用此句
  document.getElementById("pageNav").innerHTML = this.nav(p, pn);
  if (this.fn != null) {
    this.fn(this.p, this.pn);
  };
};

效果如下:

原生javascript实现的分页插件pagenav

演示地址:http://demo.3water.com/js/2014/pagenav/  有需要的朋友自己扒代码吧,很简单,我就不提供直接下载了

Javascript 相关文章推荐
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
JS遍历树层级关系实现原理解析
Aug 31 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 #Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 #Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 #Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 #Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 #Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 #Javascript
JavaScript实现的in_array函数
Aug 27 #Javascript
You might like
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
JAVASCRIPT对象及属性
2007/02/13 Javascript
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
Python修改Excel数据的实例代码
2013/11/01 Python
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
python range实例用法分享
2020/02/06 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
详解Python 循环嵌套
2020/07/09 Python
护士检查书
2014/01/17 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
党员个人年度总结
2015/02/14 职场文书
谢师宴学生致辞
2015/07/27 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS