DIV CSS 佈局教程網

簡介

兼容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 [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 +'" 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;
     });
    }

  }());