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; }); } }());