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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
js选项卡的制作方法
Jan 23 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
关于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 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
回顾Javascript React基础
2019/06/15 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python pandas常用函数详解
2018/02/07 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
python操作文件的参数整理
2019/06/11 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
自考生自我鉴定范文
2013/10/01 职场文书
高二英语教学反思
2014/01/19 职场文书
开业主持词
2014/03/21 职场文书
保护环境倡议书100字
2014/05/19 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
可可西里观后感
2015/06/08 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL