JavaScript制作简单分页插件


Posted in Javascript onSeptember 11, 2016

简介

兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页。

使用

Browser

<link rel="stylesheet" href="css/GB-paging.css">
<script src="js/GB-paging.js"></script>

普通分页

HTML

<div id="gbpaging" class="gb-paging">

JS

gbPaging({
  total: 101,
  paramName: 'p',
  curPage: getPage('p', '#'),
  size: 5,
  prevText: '<',
  nextText: '>',
  pageInfo: '<b>{{currentPage}}</b>/<b>{{totalPages}}</b>',
  eventType: 'click'
});

同页面另一个分页

HTML

<div id="paging1" class="gb-paging"></div>

JS

gbPaging({
  eleId: 'paging1',
  total: 54,
  size: 10,
  prevText: false,
  nextText: false,
  paramName: 'p1',
  curPage: getPage('p1', '#'),
  pageInfo: false,
  eventType: 'click'
});

刷新带参数

HTML

<div id="paging2" class="gb-paging"></div>

JS

gbPaging({
  eleId: 'paging2',
  total: 2500,
  paramName: 'page',
  curPage: getPage('page', '?type=1&name=2&'),
  goUrl: '?type=1&name=2&{{n}}'
});

辅助函数

function getPage(pname, other){
  var page = window.location.search.replace( other + pname + '=', '') || 1;
  return parseInt(page);
}

选项

eleId 分页容器,仅支持ID,默认为: 'gbpaging'
total: 总记录数
paramName: 分页参数名 || 'p'
curPage: 当前页码
size: 每页记录数 || 10
prevText: 上一页文案 || '上一页',值为 false 不显示
nextText: '下一页文案 || '下一页' 值为 false 不显示
pageInfo: 分页信息,{{currentPage}}当前页码,{{totalPages}}总页数 || 当前第{{currentPage}}页/共{{totalPages}}页,值为 false 不显示
eventType: 事件方式,'click' || 'link'
goUrl: 链接URL,'?type=1&name=2&{{n}}' || '',{{n}}为分页参数名+值,如:'p=1'

Github

https://github.com/givebest/GB-paging

完整代码

/**
  * GB-paging.js
  * @class gbPaging
  * @see https://github.com/givebest/GB-paging
  * @author givenlovs@msn.com
  * @(c) 2016
  **/

  (function() {

    var $,
    defaultConfig,
    paging = null,
    args;

    /**
    * [defaultConfig 默认配置]
    * @type {Object}
    */
   defaultConfig = {
    eventType: 'link',
    curPage: 1,       //当前页      
    size: 10,            //每页n条
    paramName: 'p',         //页码参数
    prevText: '上一页',
    nextText: '下一页',
    pageInfo: '当前第<b>{{currentPage}}</b>页/共<b>{{totalPages}}</b>页'
   }

    /**
     * [$ description]
     * @param {String} id 
     * @return {Object} HTML  [HTML element]
     */
    $ = function(id) {
      return document.getElementById(id);
    }

    function GbPaging() {  
      if (!(this instanceof GbPaging)) return new GbPaging();
    }

    GbPaging.prototype.init = function(opts) {
      this.getParams(opts);
      this.build();
      this.events();
    }

    GbPaging.prototype.getParams = function(opts) {
      args = this.opts = opts || {};
      // _this = this;

    if ($(args.eleId)) {
     args.container = $(args.eleId);
    } else if ($('gbpaging')) {
     args.container = $('gbpaging');
    } else {
     return;
    }

    args.eventType = args.eventType || defaultConfig.eventType;
    args.total = args.total || 0;
    args.curPage = args.curPage || defaultConfig.curPage;
    args.size = args.size || defaultConfig.size;
    args.paramName = args.paramName || defaultConfig.paramName;
    args.goUrl = args.goUrl || '';
    args.pages = Math.ceil(args.total / args.size || 0);
    args.isPrev = (args.prevText !== false) ? true : false;
    args.prevText = args.prevText || defaultConfig.prevText;
    args.isNext = (args.nextText !== false) ? true : false;
    args.nextText = args.nextText || defaultConfig.nextText;
    args.isPageInfo = (args.pageInfo !== false) ? true : false;
    args.pageInfo = args.pageInfo || defaultConfig.pageInfo;
    }

    /**
     * [分页html]
     * @return {[type]} [description]
     */
    GbPaging.prototype.build = function() {
      var html = [];
      // console.log('build', args)

      // 没有数据
    if (args.pages <= 1) {
     addClass(args.container, 'gb-hide');
     return;
    }

    if (args.curPage >>> 0 <= 0) return;

    var ii = (args.curPage == 1 || args.curPage == args.pages) ? 3 : 2;
    var urlParam = parseUrl(args.goUrl, args.paramName);

    html.push('<a href="'+ urlParam + args.curPage +'" class="gb-paging-current">' + args.curPage + '</a>');

    for (var i = 1; i < ii; i++) {
     if (args.curPage - i > 1) {
      html.unshift('<a href="'+ urlParam + (args.curPage - i) +'">' + (args.curPage - i) + '</a>');
     }

     if (args.curPage + i < args.pages) {
      html.push('<a href="'+ urlParam + (args.curPage + i) +'">' + (args.curPage + i) + '</a>');
     }
    }

    if (args.curPage - 2 > 1) {
     html.unshift('<span class="gb-paging-ellipsis">...</span>');
    }

    if (args.curPage > 1) {
     html.unshift('<a href="'+ urlParam +'1">1</a>');
     args.isPrev && html.unshift('<a href="'+ urlParam + (args.curPage - 1) +'">' + args.prevText + '</a>');
    } else {
     args.isPrev && html.unshift('<a class="disabled">' + args.prevText + '</a>');
    }

    if (args.curPage + 2 < args.pages) {
     html.push('<span class="gb-paging-ellipsis">...</span>');
    }

    if (args.curPage < args.pages) {
     html.push('<a href="'+ urlParam + args.pages +'">' + args.pages + '</a>');
     args.isNext && html.push('<a href="'+ urlParam + (args.curPage + 1) +'">' + args.nextText + '</a>');
    } else {
     args.isNext && html.push('<a class="disabled">' + args.nextText + '</a>');
    }

    // 是否显示右侧分页信息
    if (args.isPageInfo) html.push('<div class="gb-paging-info">' + args.pageInfo.replace('{{currentPage}}', args.curPage).replace('{{totalPages}}', args.pages) + '</div>');

    args.container.innerHTML = html.join('');
    }

    /**
     * [绑定事件]
     * @return {[type]} [description]
     */
    GbPaging.prototype.events = function() {
      var _this = this;

      if (args.eventType !== 'click') return;
    bind(args.container, 'click', function(e) {
     e = e || window.event;
     e.preventDefault ? e.preventDefault() : e.returnValue = false;
     args = _this.opts;

     // console.log('events', _this.opts);

     var target = e.target || e.srcElement;
     if (target.tagName.toLowerCase() === 'a' && !hasClass(target, 'disabled')) {
      args.curPage = target.getAttribute('href').replace(parseUrl(args.goUrl, args.paramName), '');
      if (args.curPage >>> 0 === 0) args.curPage = args.curPage.replace(window.location.href, '');
      args.curPage = parseInt(args.curPage);
      
      _this.build(); 
     }
    });
    }

    /**
     * [解释URL]
     * @param {[String]} url  [description]
     * @param {[String]} param [description]
     * @return {[String]}    [description]
     */
    function parseUrl(url, param) {
    if (url) {
     return url.replace('{{n}}', param + '=');
    } else {
     return '#' + param + '=';
    }
   }

    /**
    * Bind events to elements 
    * @param {Object}  ele  HTML Object
    * @param {Event}   event Event to detach 
    * @param {Function} fn   Callback function 
    */
    function bind(ele, event, fn) {
      if (typeof addEventListener === 'function') {
      ele.addEventListener(event, fn, false);
      } else if (ele.attachEvent) {
      ele.attachEvent('on' + event, fn);  
      } 
    }

    /**
    * Unbind events to elements
    * @param {Object}  ele  HTML Object
    * @param {Event}   event Event to detach 
    * @param {Function} fn   Callback function 
    */
  /* function unbind(ele, event, fn) {
      if (typeof removeEventListener === 'function') {
       ele.removeEventListener(event, fn, false);
      } else if (ele.detachEvent) {
       ele.detach('on' + event, fn);
      }
    }*/


    /**
    * hasClass
    * @param {Object} ele  HTML Object
    * @param {String} cls  className
    * @return {Boolean}
    */
    function hasClass(ele, cls) {
      if (!ele || !cls) return false;
      if (ele.classList) {
       return ele.classList.contains(cls); 
      } else {
       return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
      }
    }

    /**
    * [addClass description]
    * @param {Object} ele [HTML Object]
    * @param {String} cls [className]
    */
    function addClass(ele, cls) {
      if (ele.classList) {
       ele.classList.add(cls);
      } else {
       if (!hasClass(ele, cls)) ele.className += '' + cls; 
      }
    }

    /**
    * [removeClass description]
    * @param {Object} ele [HTML Object]
    * @param {String} cls [className]
    */
  /* function removeClass(ele, cls) {
      if (ele.classList) {
       ele.classList.remove(cls);
      } else {
       ele.className = ele.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
      }
    }*/


    if (window.gbPaging === undefined) {
      window.gbPaging = function (opts) {
        paging = GbPaging();
        return paging.init(opts); 
      }
    }


    // AMD (@see https://github.com/jashkenas/underscore/blob/master/underscore.js)
    if (typeof define == 'function' && define.amd) {
     define('GB-paging', [], function() {
      return gbPaging;
     });
    }

  }());
Javascript 相关文章推荐
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
详解JS中的attribute属性
Apr 25 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 #Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 #Javascript
Javascript实现前端简单的路由实例
Sep 11 #Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 #Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 #Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 #Javascript
简单分析javascript中的函数
Sep 10 #Javascript
You might like
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
php函数连续调用实例分析
2015/07/30 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python阶乘求和的代码详解
2020/02/14 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
python推导式的使用方法实例
2021/02/28 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
简单英文演讲稿
2014/01/01 职场文书
新教师岗前培训方案
2014/06/05 职场文书
经理助理岗位职责
2015/02/02 职场文书
休假证明书
2015/06/24 职场文书
2016教师节问候语
2015/11/10 职场文书
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers