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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
判断用户是否在线的代码
Mar 05 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
详解react native页面间传递数据的几种方式
Nov 07 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
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
smarty内置函数section的用法
2015/01/22 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
小程序实现多列选择器
2019/02/15 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
文员个人求职自荐信
2013/09/21 职场文书
加工操作管理制度
2014/01/19 职场文书
数学教研活动总结
2014/07/02 职场文书
活动总结范文
2014/08/30 职场文书
法定代表人身份证明书
2015/06/18 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
win7配置本地ftp服务器的图文教程
2022/08/05 Servers