原生分页

没有灵魂的程序媛
269 阅读1分钟

原生js实现分页逻辑

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript原生手动分页组件</title>
		<style>
			/** * { margin:0;padding: 0;}会导致每个标签一开始就初始化，耗性能不适用 **/
			body, div, ul, ol, li, p, img, a, span{ margin:0;padding:0;}
			#pagenation { text-align: center;margin: 20px;}
			#pagenation [class$=_pager]{ user-select: none;list-style: none;display: inline-block;vertical-align: top;font-size: 0;padding: 0;margin: 0;}
			#pagenation button, #pagenation li {
				display: inline-block;vertical-align: top;font-size: 13px;box-sizing: border-box;text-align: center;cursor: pointer;padding: 0 4px;height: 28px;line-height: 28px;
				border: none;margin: 0 5px;background-color: #f4f4f5;color: #606266;min-width: 30px;border-radius: 2px;
			}
			#pagenation button:disabled { color: #c0c4cc;cursor: not-allowed;}
			#pagenation li:hover { color: #409EFF;}
			#pagenation .number.active { background-color: #409EFF;color: #fff;cursor: default;}
			#pagenation li.btn-quicknext, #pagenation li.btn-quickprev { font-weight: bold;line-height: 20px;}
			#pagenation li.btn-quicknext.active, #pagenation li.btn-quickprev.active { font-size: 12px;letter-spacing: -2px;line-height: 26px;}

			#other { text-align: center;margin: 20px;}
			#other [class$=_pager]{ user-select: none;list-style: none;display: inline-block;vertical-align: top;font-size: 0;padding: 0;margin: 0;}
			#other button, #other li {
				display: inline-block;vertical-align: top;font-size: 13px;box-sizing: border-box;text-align: center;cursor: pointer;padding: 0 4px;height: 28px;line-height: 28px;
				border: none;margin: 0 5px;background-color: #f4f4f5;color: #606266;min-width: 30px;border-radius: 2px;
			}
			#other button:disabled { color: #c0c4cc;cursor: not-allowed;}
			#other li:hover { color: #409EFF;}
			#other .number.active { background-color: #409EFF;color: #fff;cursor: default;}
			#other li.btn-quicknext, #other li.btn-quickprev { font-weight: bold;line-height: 20px;}
			#other li.btn-quicknext.active, #other li.btn-quickprev.active { font-size: 12px;letter-spacing: -2px;line-height: 26px;}
		</style>
	</head>
	<body>
        <div id="pagenation" class="pagination"></div>
        <hr>
        <div id=other class="pagination"></div>
	</body>
	
	<script type="text/javascript">
		/**
		 * 分页组件
		 * @params obj 配置参数
		 * @author hmt
		 */
		function Pagenation(obj) {
			this.wrap = obj.wrap; //容器
			this.page = obj.page || 1; //默认初始页
			this.size = obj.size || 10; //默认页面固定条数
			this.total = obj.total || 0; //默认总条数
			this.pages = Math.ceil(this.total / this.size); //默认总页数
			this.callback = obj.callback; //默认回调函数
			this.quickPages = 5; //默认快速翻页的页数
			this.interval = obj.interval ? (obj.interval < 3 ? obj.interval : 4) : 4; //默认间隔的数字是4+1=5个
			this.init(); //初始化
		}
		Pagenation.prototype = {
			constructor: Pagenation, //构造函数指向原函数
			init: function() { //创建dom结构
				this.wrap.innerHTML = ''; //渲染元素前先清空之前的所有元素
				this.wrap.appendChild(this.prevBtn()); //添加上一页按钮
				if (this.pages > 0) {
					this.wrap.appendChild(this.pageNum()); //添加页数按钮
				}
				this.wrap.appendChild(this.nextBtn()); //添加下一页按钮
				this.switchPage(); //绑定按钮事件
			},
			// changeSize: function (s) { //设置新的页码显示条数
			// 	this.size = s || 10;
			// 	this.pages = Math.ceil(this.total / this.size);
			// 	this.init();
			// },
			changeTotal: function (t) { //设置新的总条数
				this.total = t || 0;
				this.pages = Math.ceil(this.total / this.size);
				this.init();
			},
			switchPage: function() { //绑定按钮事件
				var _this = this; //声明变量指向当前构造函数
				let numbers = this.wrap.querySelectorAll('.number');
				for (let i = 0, len = numbers.length; i < len; i++) {
				    numbers[i].onclick = function () { //数字按钮点击事件
						if (_this.page != this.innerText) {
							console.log(_this.page, this.innerText)
							_this.page = Number(this.innerText);
							_this.init();
							_this.callback(_this.page); //按钮事件回调函数
						}
				    };
				}
				this.wrap.querySelector('.btn-prev').onclick = function() { //上一页按钮点击事件
				    _this.page = --_this.page;
				    _this.init();
					_this.callback(_this.page); //按钮事件回调函数
				};
				this.wrap.querySelector('.btn-next').onclick = function() { //下一页按钮点击事件
				    _this.page = ++_this.page;
				    _this.init();
					_this.callback(_this.page); //按钮事件回调函数
				};
				let quickprev = this.wrap.querySelector('.btn-quickprev')
				if (quickprev) {
					quickprev.onclick = function() { //快速向上翻多页按钮点击事件
					    _this.page = _this.page - _this.quickPages < 0 ? 1 : _this.page - _this.quickPages;
					    _this.init();
						_this.callback(_this.page); //按钮事件回调函数
					};
					quickprev.onmouseenter = function(e) { //快速向上翻多页按钮鼠标移入事件
						e.target.classList.add('active');
						// e.target.innerText = '<<';
						e.target.innerText = '...';
					};
					quickprev.onmouseleave = function(e) { //快速向上翻多页按钮鼠标移出事件
						e.target.classList.remove('active');
						e.target.innerText = '...';
					};
				}
				let quicknext = this.wrap.querySelector('.btn-quicknext')
				if (quicknext) {
					quicknext.onclick = function() { //快速向下翻多页按钮点击事件
					    _this.page = _this.page + _this.quickPages > _this.pageT ? _this.pageT : _this.page + _this.quickPages;
					    _this.init();
						_this.callback(_this.page); //按钮事件回调函数
					};
					quicknext.onmouseenter = function(e) { //快速向下翻多页按钮鼠标移入事件
						e.target.classList.add('active');
						e.target.innerText = '>>';
					};
					quicknext.onmouseleave = function(e) { //快速向下翻多页按钮鼠标移出事件
						e.target.classList.remove('active');
						e.target.innerText = '...';
					};
				}
			},
			prevBtn: function() { //添加上一页按钮
			    let btnprev = document.createElement('button');
			    btnprev.setAttribute('class', 'btn-prev');
				btnprev.setAttribute('type', 'button');
			    btnprev.innerText = '<';
			    if (this.page === 1 || this.pages <= 0) {
			        btnprev.setAttribute('disabled', true);
			    } else {
					btnprev.removeAttribute('disabled');
				}
			    return btnprev;
			},
			nextBtn: function() { //添加下一页按钮
			    let btnnext = document.createElement('button');
			    btnnext.setAttribute('class', 'btn-next');
				btnnext.setAttribute('type', 'button');
			    btnnext.innerText = '>';
			    if (this.page === this.pages || this.pages <= 0) {
			        btnnext.setAttribute('disabled', true);
			    } else {
					btnnext.removeAttribute('disabled');
				}
			    return btnnext;
			},
			pageNum: function() { //添加页数按钮
				let ol = document.createElement('ol'); //数字按钮区域容器
				ol.classList.add(this.wrap.id + '_pager');
				let currentPage = this.page;
				let resetPages = this.pages;
				let first = currentPage <= this.interval ? 1 : currentPage > (resetPages - this.interval) ? resetPages - (this.interval + 1) : currentPage - (this.interval - 1);
				first = first === 0 ? 1 : first;
				ol.appendChild(this.renderNum(1));
				if (first - 1 >= 1){
					ol.appendChild(this.renderButton('btn-quickprev'));
				}
				let last = first + this.interval + 2;
				for (let i = first + 1; i < last; i++) {
					if (i === resetPages - this.interval && last > resetPages) {
						ol.appendChild(this.renderNum(first));
					}
					if (i <= resetPages) {
						ol.appendChild(this.renderNum(i));
					}
					if (i === last -1 && resetPages - i > 1) {
						ol.appendChild(this.renderButton('btn-quicknext'));
						ol.appendChild(this.renderNum(resetPages));
					}
				}
				return ol;
			},
			renderNum: function(i) { //渲染数字按钮结构
				let number = document.createElement('li');
				number.classList.add('number');
				number.innerText = i;
				if (i === this.page) {
					number.classList.add('active');
				}
				return number;
			},
			renderButton: function(name) { //渲染翻页按钮结构
				let button = document.createElement('li');
				button.classList.add(name);
				button.innerText = '...';
				return button;
			}
		}
	</script>
	<script type="text/javascript">
		var pagenation = new Pagenation({ //实例化组件
			wrap: document.getElementById('pagenation'), //容器
			page: 1, //当前页,默认初始为1 
            size: 1, //页面条数,默认为10
            total:100,
            interval:1,
			callback: function(page) {  
				// ajaxtest()
	        }
		});
		
		// function ajaxtest() {
		// 	console.log('页码：', pagenation.page);
		// 	pagenation.changeTotal(100);
		// }
        // ajaxtest()
        
        var other = new Pagenation({
            wrap: document.getElementById('other'), //容器
			page: 1, //当前页,默认初始为1 
            size: 1, //页面条数,默认为10
            total:100,
            interval:1,
			callback: function(page) {  
				// ajaxtest()
	        }
        })
	</script>
</html>
avatar
文章
阅读
粉丝