原生javascript实现的分页插件pagenav

作者:hebedich 时间:2024-06-14 23:55:33 

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

标签:javascript,分页插件,pagenav
0
投稿

猜你喜欢

  • Django使用消息提示简单的弹出个对话框实例

    2023-02-08 06:23:07
  • 考虑SQL Server安全时所应注意的几个方面

    2009-01-04 13:57:00
  • python笔记(2)

    2021-10-16 21:50:00
  • [译稿]Web 字体的未来

    2008-07-31 17:50:00
  • Python3 操作 MySQL 插入一条数据并返回主键 id的实例

    2024-01-21 06:05:16
  • Python如何使用print()函数输出格式化字符串

    2021-03-09 22:43:41
  • Python&Matlab实现炫酷的3D旋转图

    2023-07-24 22:13:52
  • 基于Python实现图像文字识别OCR工具

    2022-10-19 04:44:42
  • Python函数式编程实现登录注册功能

    2022-02-16 14:03:31
  • 浅谈Scrapy网络爬虫框架的工作原理和数据采集

    2023-08-24 22:17:21
  • 从零开始学YII2框架(五)快速生成代码工具 Gii 的使用

    2024-05-11 09:54:56
  • 基于canvas的二维码邀请函生成插件

    2024-04-17 10:40:53
  • 模拟下拉菜单[兼容IE系列以及火狐]

    2009-12-13 10:23:00
  • Go实现文件上传和下载

    2023-06-19 07:42:32
  • Python自动化操作实现图例绘制

    2021-03-07 11:24:40
  • 13家著名科技公司logo标识来历及演变

    2008-02-19 16:42:00
  • python闭包和装饰器你了解吗

    2022-01-11 00:46:02
  • 网站鼠标变变变!

    2010-10-20 20:09:00
  • pytorch DistributedDataParallel 多卡训练结果变差的解决方案

    2021-09-24 14:31:43
  • Python爬取用户观影数据并分析用户与电影之间的隐藏信息!

    2022-09-09 23:19:47
  • asp之家 网络编程 m.aspxhome.com