JavaScript制作简单分页插件

简介

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

使用

Browser

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

普通分页

HTML

<div id="gbpaging">

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"></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"></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 [email protected]  * @(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 +'">' + 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>...</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>' + args.prevText + '</a>');    }    if (args.curPage + 2 < args.pages) {     html.push('<span>...</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>' + args.nextText + '</a>');    }    // 是否显示右侧分页信息    if (args.isPageInfo) html.push('<div>' + 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;     });    }  }());