首页 > 编程 > JavaScript > 正文

原生javascript实现的分页插件pagenav

2019-11-20 14:13:57
字体:
来源:转载
供稿:网友

这一款是用原生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);  };};

效果如下:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表