前端JS简单实现分页功能

最新推荐文章于 2024-07-29 11:53:27 发布
luweimo
最新推荐文章于 2024-07-29 11:53:27 发布
阅读量1.2k
点赞数 11
文章标签： javascript 前端 js
本文链接：https://blog.csdn.net/luweimo/article/details/135847179
版权
显示效果：
附完整代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>原生JS-分页</title>
	</head>
	<body>
			<div id="pages" style="margin: 50px;"></div>
			<div id="pages2" style="margin: 50px;"></div>
	</body>
	<style>
		body,html{ margin: 0; border: 0; font-size: 14px; font-family: 'Source Han Sans SC','PingFang SC','Microsoft YaHei',Helvetica,Arial,sans-serif;}
		a{ text-decoration: none; color: #444; transition: all .3s;}
		div,img,ul,li,em,p,span{ margin: 0; padding: 0;}
		ul,li{ list-style: none;}
		em,p,span,i{ font-style: normal;}
		input,select,textarea,button{ margin: 0; padding: 0; font-size: 14px; font-family: 'Source Han Sans SC','PingFang SC','Microsoft YaHei',Helvetica,Arial,sans-serif;}
		
		/*分页*/
		.mo-pagination{ width: 100%; display: block; overflow: hidden;}
		.mo-pagination-btn{ float: left; height: 30px; line-height: 28px; box-sizing: border-box; border: 1px solid #ddd; background: #fff; padding: 0 10px; margin: 0 5px 5px 0; display: block; overflow: hidden; cursor: pointer; transition: all .3s; border-radius: 6px;}
		.mo-pagination-btn:hover{ color: #068EFF; border-color: #068EFF;}
		.mo-pagination-disabled{ pointer-events: none; opacity: .5; cursor: not-allowed;}
		.mo-pagination-select{ float: left; display: block; overflow: hidden; line-height: 30px; margin: 0 5px 5px 0;}
		.mo-pagination-select em{ float: left;}
		.mo-pagination-select select{ float: left; height: 30px; line-height: 28px; border: 1px solid #ddd; background: #fff; padding: 0 10px; margin: 0 5px; display: block; overflow: hidden; transition: all .3s; border-radius: 6px;}
		.mo-pagination-select select:hover{ border-color: #068EFF;}
		.mo-pagination-mark{ float: left; height: 30px; line-height: 30px; padding: 0 10px; margin: 0 5px 5px 0; display: block; overflow: hidden;}
		.mo-pagination-num{ float: left; display: block; overflow: hidden; margin: 0 5px 5px 0;}
		.mo-pagination-num a{ float: left; width: 30px; text-align: center; height: 30px; line-height: 28px; box-sizing: border-box; border: 1px solid #ddd; margin: 0 3px; display: block; overflow: hidden; cursor: pointer; border-radius: 50%;}
		.mo-pagination-num a.active{ color: #068EFF; border-color: #068EFF;}
		.mo-pagination-enter{ float: left; display: block; overflow: hidden; line-height: 30px;}
		.mo-pagination-enter em{ float: left;}
		.mo-pagination-enter input{ width: 50px; height: 30px; text-align: center; line-height: 28px; box-sizing: border-box; border: 1px solid #ddd; background: #fff; float: left; margin: 0 5px; transition: all .3s; border-radius: 6px;}
		.mo-pagination-enter input:hover{ color: #068EFF; border-color: #068EFF;}
	</style>
		
	<script>
		//分页引用方法一
		let pg_para = {};
		pg_para['thisbox'] = document.getElementById('pages');
		pg_para['current'] = 1;//当前页 *
		pg_para['size'] = 10;//当前显示条数 *
		pg_para['total'] = 115;//总条数 *
		pg_para['backfun'] = function(current,size){
			console.log('返回的当前页码，当前每页显示条数',current,size)
		};
		let pg = new moPagination(pg_para);
		
		//分页引用方法二
		let pg2 = new moPagination( document.getElementById('pages2') , 1 , 50 , 160 , function( current , size ){
			console.log('返回的当前页码，当前每页显示条数',current,size)
		})
		
		
		// 分页方法
		// thisbox 父节点 
		// current 当前页
		// size 每页显示条数
		// total 总条数
		// backfun 返回current,size
		function moPagination(thisbox,current,size,total,backfun){
			let tl = this;
			tl.box = thisbox.thisbox || thisbox;
			tl.current = thisbox.current || current;
			tl.size = thisbox.size || size;
			tl.total = thisbox.total || total;
			tl.backfun = thisbox.backfun || backfun;
			
			tl.box.innerHTML = '';
			let boxs = levelDom(tl.box,'div','mo-pagination');
			
			//通过总数和显示条数，计算共有多少页
			let page_total = Math.ceil(tl.total / tl.size);
			
			//首页按钮
			let page_home = levelDom(boxs,'span','mo-pagination-btn','首页');
			page_home.onclick = function(){
				moPagination(tl.box,1,tl.size,tl.total,tl.backfun);
			}
			
			//上一页按钮
			let page_prev = levelDom(boxs,'span','mo-pagination-btn','上一页');
			page_prev.onclick = function(){
				moPagination(tl.box,tl.current - 1,tl.size,tl.total,tl.backfun);
			}
			
			//页码
			let page_num = levelDom(boxs,'div','mo-pagination-num');
			let num_size = tl.current <= 3 ? 1 : (tl.current > (page_total - 3) ? page_total - 4 : tl.current - 2);//三元双重运算
			num_size = num_size ==0 ? 1 : num_size;
			for (let i = num_size; i < (num_size + 5); i++) {
				if(i > page_total){
					break;
				}
				let num = levelDom(page_num,'a',null,i);
				if(i == tl.current){
					num.classList.add('active');
				}
				num.onclick = function(){
					moPagination(tl.box,i,tl.size,tl.total,tl.backfun);
				}
			}
			
			//下一页按钮
			let page_next = levelDom(boxs,'span','mo-pagination-btn','下一页');
			page_next.onclick = function(){
				moPagination(tl.box,tl.current + 1,tl.size,tl.total,tl.backfun);
			}
			
			//尾页按钮
			let page_tail = levelDom(boxs,'span','mo-pagination-btn','尾页');
			page_tail.onclick = function(){
				moPagination(tl.box,page_total,tl.size,tl.total,tl.backfun);
			}
			
			//总条数，总页数
			let page_mark = levelDom(boxs,'div','mo-pagination-mark');
			page_mark.innerHTML = '共' + tl.total + '条,当前 ' + tl.current + '/' + Math.ceil(tl.total / tl.size) + '页';
			
			//改变每页显示条数
			let page_size = levelDom(boxs,'div','mo-pagination-select');
			levelDom(page_size,'em',null,',每页显示');
			let psize = levelDom(page_size,'select');
			for(let i = 10 ; i < 101 ; i += 10){
				let option = levelDom(psize,'option',null,i);
				if(i == tl.size){
					option.setAttribute("selected", "selected");
				}
				option.value = i;
			}
			psize.onchange = function(){
				moPagination(tl.box,1,this.value,tl.total,tl.backfun);
			}
			levelDom(page_size,'em',null,'条');
			
			//跳转到指定页
			let page_enter = levelDom(boxs,'div','mo-pagination-enter');
			levelDom(page_enter,'em',null,',前往');
			let enter = levelDom(page_enter,'input');
			enter.type = 'number';
			enter.value = tl.current;
			enter.addEventListener('keyup', function(event) {
				//绑定键盘enter键
				if (event.keyCode === 13) {
					let val = enter.value;
					if(val <= 0){
						confirm('请正确输入!');enter.value = tl.current;return
					}
					if( val > page_total){
						confirm('请正确输入!');enter.value = tl.current;return
					}
					moPagination(tl.box,val,tl.size,tl.total,tl.backfun);
				}
			});
			levelDom(page_enter,'em',null,'页');
			
			//如果当前是第一页，不可点击按钮
			if(tl.current == 1){
				page_home.classList.add('mo-pagination-disabled');
				page_prev.classList.add('mo-pagination-disabled');
			}
			//如果当前是最后页，不可点击按钮
			if(tl.current == page_total){
				page_next.classList.add('mo-pagination-disabled');
				page_tail.classList.add('mo-pagination-disabled');
			}
			
			//返回当前页，当前显示条数
			tl.backfun(tl.current,tl.size);
		}
		
		
		// 快速创建节点方法
		// pobj父节点 ，dtag节点类型，dclass节点类名 ，dtxt节点文本
		function levelDom(pobj,dtag,dclass,dtxt){
			let obj = document.createElement(dtag);
			if(dtxt) obj.innerHTML = dtxt;
			if(dclass) obj.setAttribute("class",dclass);
			pobj.appendChild(obj);
			return obj;
		}
	</script>
</html>