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

简介

兼容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'

DEMO

http://blog.givebest.cn/GB-paging.html

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

	}());

转载请注明：http://www.cnblogs.com/givebest/p/5861930.html

posted @ 2016-09-11 15:43 givebest 阅读(718) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

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

简介

使用

Browser

普通分页

HTML

JS

同页面另一个分页

HTML

JS

刷新带参数

HTML

JS

辅助函数

选项

DEMO

Github

完整代码

感谢亲的光临，如果亲感觉这篇文章还不错或对亲有帮助，欢迎在下面“推荐”点个赞或者随意金额打赏，亲的支持是我最大的动力。

欢迎打赏

公告