JavaScript简单分页，兼容IE6，~3KB-白红宇

JavaScript简单分页，兼容IE6，~3KB

阅读量：6222 次

发布时间：2019-06-21

本文共 8886 字，大约阅读时间需要 29 分钟。

简介

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

使用

Browser

普通分页

HTML

JS

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

同页面另一个分页

HTML

JS

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

刷新带参数

HTML

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'

DEMO

Github

完整代码

/**    * 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: '当前第{
   {currentPage}}页/共{
   {totalPages}}页'      }        /**         * [$ 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('' + args.curPage + '');        for (var i = 1; i < ii; i++) {          if (args.curPage - i > 1) {            html.unshift('' + (args.curPage - i) + '');          }          if (args.curPage + i < args.pages) {            html.push('' + (args.curPage + i) + '');          }        }        if (args.curPage - 2 > 1) {          html.unshift('...');        }        if (args.curPage > 1) {          html.unshift('1');          args.isPrev && html.unshift('' + args.prevText + '');        } else {          args.isPrev && html.unshift('' + args.prevText + '');        }        if (args.curPage + 2 < args.pages) {          html.push('...');        }        if (args.curPage < args.pages) {          html.push('' + args.pages + '');          args.isNext && html.push('' + args.nextText + '');        } else {          args.isNext && html.push('' + args.nextText + '');        }        // 是否显示右侧分页信息        if (args.isPageInfo) html.push('
    
     ' + args.pageInfo.replace('{
   {currentPage}}', args.curPage).replace('{
   {totalPages}}', args.pages) + '
    
');        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;          });        }    }());