原生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 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
JavaScript进制转换实现方法解析
Jan 18 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&amp;java(三)
2006/10/09 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
告诉大家什么是JSON
2008/06/10 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
使用python绘制常用的图表
2016/08/27 Python
python之Character string(实例讲解)
2017/09/25 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
服务理念标语
2014/06/18 职场文书
禁毒宣传标语
2014/06/19 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
结婚典礼主持词
2015/06/29 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书