JavaScript经典实例之分页（简单易用）原生js封装分页（一次性数据）

最新推荐文章于 2024-05-10 22:28:18 发布

编程界小明哥

最新推荐文章于 2024-05-10 22:28:18 发布

阅读量2.4k

点赞数 3

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/dkm123456/article/details/111310131

版权

javascript 专栏收录该内容

78 篇文章 27 订阅

订阅专栏

 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <style>
        *{
        	margin:5px;
        	padding:0;
        }
        
		.table {
			word-break: break-all;
			cursor: default;
			BORDER: #FFFFFF 1px solid;
			background-color: #FFFFFF;
			border-collapse: collapse;
			border-Color: #E2B801;
			width:60%;
        }
	    .pager{padding:0;margin:0;white-space:nowrap}
		.pager li{list-style:none;font-family:arial;font-size:14px;padding:2px;margin:5px;border:#333 1px solid;text-align:center;border-radius:5px;max-width:80px;width:25px;height:22px;line-height:22px;cursor:pointer;background:#fff;display:inline-block}
		.pager li:hover{border:#4876ff 1px solid;color:#4876ff}
		.pager li.pg-hidepage{display:none}
		.pager li.pg-prev,li.pg-next{width:80px}
		.pager li.pg-selected{border:#4876ff 1px solid;background:deepskyblue;color:white}
		.pager li.pg-selected:hover{color:#000;cursor:default}
		.pager li.pg-dislabel{color:#ccc;border:#ccc 1px solid;cursor:default}
		.pager li.pg-dislabel:hover{border:#ccc 1px solid}
        
        </style>
        </head>
        <body>
        	<div id="list"></div>
        	<div id="pager"></div>
			<p id="loading" style='padding-left:10px;height:30px;'></p>
        </body>
<script>
		function loadPager(el,option){
			var page_ul,pageSize,totalCount,curPage,nav_count,callback,totalPage,pagerId,nav_mid,nav_rela,
				prevName='上一页',nextName='下一页',firstName='首页',lastName='尾页',
				leftCount=0,rightCount=0,
				btn_dislabel='pg-dislabel',btn_selected='pg-selected',btn_hide='pg-hidepage';
				
			//初始化并设置一些默认值
			init();
			//显示分页
			el.innerHTML=genHtml();
			
			//给UL添加点击事件
			handleClick();
			
			//处理按钮
			handleBtn();
			
			//初次加载响应点击事件
			callback(curPage);
			
			function init(){
				var $option = option || {};
				pageSize=$option.pageSize||10;
				totalCount=$option.totalCount||0;
				curPage=$option.curPage||1;
				nav_count=$option.nav_count||0;
				callback=$option.callback||function(){};
				//计算总页数
				totalPage = parseInt(totalCount/pageSize)+((totalCount%pageSize>0)?1:0);
				pagerId = "pager_ul_"+Math.round(Math.random()*(9999-1000)+1000);
				
				nav_mid = Math.round(nav_count/2);
			}
			//生成显示分页的html
			function genHtml (pager){ 
			    var html="<ul class='pager' id='"+pagerId+"'>";
			   	    html+="<li class='pg-prev' id='first'>"+firstName+"</li>";
			    	html+="<li class='pg-prev' id='prev'>"+prevName+"</li>";
					for(var i=0;i<totalPage; i++){ 
						var page=(i+1);
						if(i<nav_count ){//显示 
							html +="<li page='"+page+"' class='pg-showpage'>"+page+"</li>"
						}else{//隐藏
							html+="<li page='"+page+"' class='pg-hidepage'>"+page+"</li>"
						}
					}
					html+="<li class='pg-next' id='next'>"+nextName+"</li>";
					html+="<li class='pg-prev' id='last'>"+lastName+"</li>";
					html+="</ul>";
					return html;
			}
			
			function handleClick(){
				page_ul = document.getElementById(pagerId);
				//给UL添加事件
				document.addEventListener?
					page_ul.addEventListener('click',handleUl):page_ul.attachEvent('click',handleUl);
				
				function handleUl(e){
					var e = e || window.event;
					var target = e.target || e.srcElement;
					
					if(target.tagName.toUpperCase()!=='LI') return ;
					//查找按钮是不是不可用的
					var index = findIndex(class2Array(target),[btn_dislabel,btn_selected]);
					if(index!==-1){//如果是不可用的，则不响应点击
						return ;
					}
					var page_val;//按钮选择后当前页的值
					//处理首页、上一页、下一页、尾页
					if(target.id==='prev'){
						page_val = curPage-1;
					}else if(target.id==='next'){
						page_val = curPage+1;
					}else if(target.id==='first'){
						page_val = 1;
					}else if(target.id==='last'){
						page_val = totalPage;
					}else{
						page_val = target.innerText;
					}
					curPage=parseInt(page_val);
					//每次选择要重新处理按钮
					handleBtn();
					//响应点击事件
					callback(curPage);
				}
			}
			
			function handleBtn(){
				//首页是否有效
				var first = page_ul.firstChild;
				if(curPage===1){
					handleClass(first,btn_dislabel,'add');
				}else{
					handleClass(first,btn_dislabel,'del');
				}
				//前一页按钮是否有效
				var prev = first.nextSibling;
				if(curPage===1){
					handleClass(prev,btn_dislabel,'add');
				}else{
					handleClass(prev,btn_dislabel,'del');
				}
				//nav_rela
				if(curPage===1){
					leftCount=0;
				}else{
					nav_rela = curPage-nav_mid;
					leftCount = (leftCount+ nav_rela)>0?(leftCount+ nav_rela):0;
					nav_mid += nav_rela;
				}
				if(curPage===totalPage){
					rightCount=0;
				}else{
					rightCount = totalPage-nav_count-leftCount;//右边隐藏节点数
				}
			
				//选择当前页
				for(var i=1;i<=totalPage; i++){ 
					var page=(i+1);
					if(i==curPage){//选择当前页
						if(curPage===1 || curPage===totalPage){
							handleClass(page_ul.childNodes[page],btn_hide,'del');
						}
						handleClass(page_ul.childNodes[page],btn_selected,'add');	
					}else{
						if(leftCount<=0 || rightCount<=0){//左右隐藏节点或者为0的时候，要另外处理
							if(leftCount<=0){
								if(i<=nav_count){
									handleClass(page_ul.childNodes[page],btn_hide,'del');
								}else{
									handleClass(page_ul.childNodes[page],btn_hide,'add');
								}
							}
							if(rightCount<=0){
								if(i>totalPage-nav_count){
									handleClass(page_ul.childNodes[page],btn_hide,'del');
								}else{
									handleClass(page_ul.childNodes[page],btn_hide,'add');
								}
							}
						}else{
							if(i<=leftCount){
								handleClass(page_ul.childNodes[page],btn_hide,'add');
							}else if(i>leftCount+nav_count ){
								handleClass(page_ul.childNodes[page],btn_hide,'add');
							}else if(i<=(leftCount+nav_count)){
								handleClass(page_ul.childNodes[page],btn_hide,'del');
							}
						}
						handleClass(page_ul.childNodes[page],btn_selected,'del');
					}
				}		
				
				//最后一页按钮是否有效
				var last = page_ul.lastChild;
				if(curPage===totalPage||totalPage===0){
					handleClass(last,btn_dislabel,'add');
				}else{
					handleClass(last,btn_dislabel,'del');
				}
				//下一页按钮是否有效
				var next = last.previousSibling;
				if(curPage===totalPage||totalPage===0){
					handleClass(next,btn_dislabel,'add');
				}else{
					handleClass(next,btn_dislabel,'del');
				}
				
			}
			//将元素el的class转换成数组
			function class2Array(el){
				var oldClass = el.className;
				if(!oldClass) return [];
				return oldClass.split(" ");
			}
			//添加或者删除当前el元素的指定class
			function handleClass(el,className,type){
				var arr = class2Array(el);
				var index = findIndex(arr,className);
				
				if(type==='add'){//添加
					if(index===-1){
						arr.push(className);
					}
				}else{
					if(index!==-1){//删除某个元素
						arr.splice(index,1);
					}
				}
				
				el.className = arr.join(" ");
			} 
			//根据传入的clas名来查到在数组中的下标
			function findIndex(arr,c){
				if(c instanceof Array){
					for(var i=0;i<c.length;i++){
						var num=findOnceIndex(arr,c[i]);
						if(num!==-1){
							return num;
						}
					}
				}else {
					return findOnceIndex(arr,c);
				}
				return -1;
			}
			
			function findOnceIndex(arr,c){
				for(var i=0;i<arr.length;i++){
					if(arr[i]===c){
						return i;
					}
				}
				return -1;
			}
		}
		
	var pager = document.getElementById("pager");
	var loading = document.getElementById("loading");
	var listDiv = document.getElementById("list");
		//组装数据
	var list = [];
	for(var i=1;i<=194;i++){
		list.push({'a':'第'+i+'行a列数据','b':'第'+i+'行b列数据','c':'第'+i+'行c列数据','d':'第'+i+'行d列数据'});
	}
	
		var start,end,html,data,pageSize=10;
		
		//加载分页
		loadPager(pager,{
			pageSize:pageSize,//每页显示条数
			totalCount:list.length,//总记录数
			curPage:1,//当前页数，不设置则默认1
			nav_count:10,//显示多少个导航
			callback:function(count){//点击翻页后的回调函数
				loading.innerText="正在加载第("+count+")页的数据，请稍后.......";
				
				start=(count-1)*pageSize,end = count * pageSize>list.length?list.length:count * pageSize;
				html='<table border="1" class="table">';
				for(start;start<end;start++){
					data = list[start];
					html +="<tr><td>"+data['a']+"</td><td>"+data['b']+"</td><td>"+data['c']+"</td><td>"+data['d']+"</td></tr>";
				}
				html +='</table>';
				
				listDiv.innerHTML=html;
				
				//做一个定时器为了看到刷新的效果
				setTimeout(function(){
					loading.innerText="";
				},1000)
			}
		});
		
</script>
</html>

效果：

编程界小明哥

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript经典实例之分页（简单易用）原生js封装分页（一次性数据）

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> *{ margin:5px; padding:0; } .table { word-break: br...
复制链接

扫一扫