原生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 相关文章推荐
javascript函数中的arguments参数
Aug 01 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
YUI模块开发原理详解
Nov 18 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
Vue常用的全选/反选的示例代码
Feb 19 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
Protoss热键控制
2020/03/14 星际争霸
Laravel 5框架学习之环境与配置
2015/04/08 PHP
php文件缓存方法总结
2016/03/16 PHP
php处理带有中文URL的方法
2016/07/11 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
window.parent与window.openner区别介绍
2012/04/12 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
Python字符串切片操作知识详解
2016/03/28 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
python中wheel的用法整理
2020/06/15 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
一个C/C++编程面试题
2013/11/10 面试题
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
网络营销策划方案
2014/06/04 职场文书
经营理念标语
2014/06/21 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
金秋助学感谢信
2015/01/21 职场文书
感恩节寄语2015
2015/03/24 职场文书
尼克胡哲观后感
2015/06/08 职场文书
投诉书格式范本
2015/07/02 职场文书