首页 > web前端 > js教程 > 正文

原生javascript实现的分页插件pagenav_jquery

php中文网
发布: 2016-05-16 16:38:26
原创
2324人浏览过

这一款是用原生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) &#63; pn: 9;
  //是否显示前置省略号,即大于10的开始页码
  if (p >= 7) {
    re += "...";
    start = p - 4;
    var e = p + 4;
    end = (pn < e) &#63; 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);
  };
};

登录后复制

效果如下:

2019最新原生js实现的一款年月日日期选择特效插件
2019最新原生js实现的一款年月日日期选择特效插件

原生js实现的一款年月日日期选择特效插件下载。基于原生JavaScript实现,非常简单实用的一款日历选择插件。

2019最新原生js实现的一款年月日日期选择特效插件 284
查看详情 2019最新原生js实现的一款年月日日期选择特效插件

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

相关标签:
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号