原生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 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
理解JS事件循环
Jan 07 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
webpack打包多页面的方法
Nov 30 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
微信小程序后端实现授权登录
Feb 24 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脚本的10个技巧(5)
2006/10/09 PHP
PHP 正则表达式小结
2015/02/12 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
python字符串替换的2种方法
2014/11/30 Python
Python中的各种装饰器详解
2015/04/11 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
单位消防安全制度
2014/01/12 职场文书
捐赠仪式主持词
2014/03/19 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
感动中国何玥观后感
2015/06/02 职场文书
企业法人代表证明书
2015/06/18 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS