分页器实现

￡神魔★判官ぃ 2021-07-24 18:47 537阅读 0赞

**产生逻辑顺序:首页->上一页->前省略号->起始页面->默认页面->截至页面->后省略号->末页->尾页**

js文件:

$(function(){ 
 	
 	var all=15;
 	var now=1;
 	
 	$.get('ll.php',function(res){ 
 		//获得页数，动态增加分页器
 		var pages=Math.ceil(JSON.parse(res).dataLength/all);
 		insert(pages,now);
 		bind(pages);
 		getData(1);
 
 	})
 
 	//产生逻辑顺序:首页->上一页->前省略号->起始页面->默认页面->截至页面->后省略号->末页->尾页
 	function insert(all,now)
 	{ 
 		var obj=$(".big");
 		//每次点击清空节点，重新创造
 		obj.empty();
 		//创建首页和上一页
 		if(now>1)
 		{ 
 			obj.append('首页');
 			obj.append("上一页");
 		
 		}else{ //默认页即首页，取消首页
 			obj.append('上一页');
 		}
 		//前引号出现范围
 		if(now>3&&now<=all&&all>5)
 		{ 
 			obj.append('...');
 		}
 		//默认页面显示的左右页面范围
 		var start=now-2;
 		var end=now+2;
 		//首页显示页面数
 		if(now==1)
 		{ 
 			end++;
 		}
 		//末页显示页面数
 		if(now>all-2)
 		{ 
 			start--;
 		}
 		
 		for(;start<=end;start++)
 		{ 
 			//当起始页大于0且小于总数时产生页面
 			if(start>0&&start<=all)
 			{ 
 				if(start!=now)
 				{ 
 					obj.append(''+start+'');
 				}else{ //给默认页面添加样式
 					obj.append(""+start+"")
 				}
 			}
 		}
 		//后省略号的出现范围
 		if(now<all-2&&all>4&&now>=1)
 		{ 
 			obj.append("...")
 		}
 		//下一页和尾页出现的情况
 		if(now<all){ 
 			obj.append('下一页');
 			obj.append("尾页");
 		}else{ 
 			obj.append('下一页');
 		}
 		
 	}
 	
 	//绑定事件
 	//传入需要绑定的总页数
 	function bind(all)
 	{ 
 		var obj=$(".big");
 		
 		//给数字页面绑定事件
 		obj.on('click','.page',function(){ 
 			//用.text()是因为会html()会返回标签和内容
 			var index=parseInt($(this).text());
 			insert(all,index);
 			getData(index);
 		});
 		
 		//给首页绑定事件
 		obj.on('click','.first',function(){ 
 			insert(all,1);
 			getData(1);
 		})
 		
 		//给上一页绑定事件
 		obj.on('click','.before',function(){ 
 			var index=parseInt($('.on').text());
 			//上一页的有效范围
 			if(index-1>=1)
 			{ 
 				insert(all,index-1);
 				getData(index-1);
 			}
 		
 		})
 		
 		//给下一页绑定事件
 		obj.on('click','.next',function(){ 
 			var index=parseInt($('.on').text());
 			//下一页的有效范围
 			if(index+1<=all)
 			{ 
 				insert(all,index+1);
 				getData(index+1);
 			}
 			
 			
 		})
 		//给尾页绑定事件
 		obj.on('click','.end',function(){ 
 			insert(all,all);
 			getData(all);
 		})
 	}
 
 	//从后台加载数据
 	function getData(page)
 	{ 
 		$.get('ll.php?page='+page,function(res){ 
 
 			var arr=JSON.parse(res).list;
 			console.log(arr);
 
 			var outDiv=document.querySelector('.out');
 			if(!outDiv)
 			{ 
 				var outDiv=document.createElement('div');
 				outDiv.className='.out';
 				outDiv.cssText="float:left;width:280px; height:250px; border:1px solid black; margin: 10px;";
 				document.body.appendChild(outDiv);
 
 				for($i=0;$i<arr.length;$i++)
 				{ 
 					var inDiv=document.createElement("div");
 					inDiv.className='.in';
 					inDiv.style.cssText='float:left; width:280px; height:250px; border:1px solid black; margin: 10px;';
 
 					var str="<img src='"+allDataArr[i].imgurl+"'>";
 					inDiv.innerHTML=str;
 					
 					outDiv.appendChild(inDiv);
 				}
 			}else{ 
 				outDiv.innerHTML=
 			}
 
 
 		});
 	}
 });

css文件:

.big{ 
    	width:100%;
    	height: 30px;
    	bottom: 30px;
    	position: absolute;
    	text-align: center;
    	-moz-user-select:none;
    }
    
    .big span{ 
    	height: 30px;
    	display: inline-block;
    	line-height: 30px;
    	padding: 0px 15px;
    	margin:0px 5px;
    	text-align: center;
    	font-size: 14px;
    	box-shadow: 0px 2px 5px gray;
    	cursor: pointer;
    }
    .big .disable{ 
    	cursor: not-allowed;
    	
    }
    .big .ell{ 
    	height: 30px;
    	display: inline-block;
    	line-height: 30px;
    	padding: 0px 10px;
    	margin:0px 5px;
    	text-align: center;
    	font-size: 14px;
    	background-color:rgb(242,242,242);
    	box-shadow: none;
    	cursor:auto;
    }
    .big .on{ 
    	background-color:rgb(16,157,89);
    	color: white;
    }

php文件:

<?php 
 	// create by frank on 2018/02/22 02:37
 	// paginationTool php file
 
 	$success = array('msg'=>'OK');
 	// $infoArr = [
 	// '数据001','数据002','数据003','数据004','数据005',
 	// '数据006','数据007','数据008','数据009','数据010',
 	// '数据011','数据012','数据013','数据014','数据015',
 	// '数据016','数据017','数据018','数据019','数据020',
 	// '数据021','数据022','数据023','数据024','数据025',
 	// '数据026','数据027','数据028','数据029','数据030',
 	// '数据031','数据032','数据033','数据034','数据035',
 	// '数据036','数据037','数据038','数据039','数据040',
 	// '数据041','数据042','数据043','数据044','数据045',
 	// '数据046','数据047','数据048','数据049','数据050',
 	// '数据051','数据052','数据053','数据054','数据055',
 	// '数据056','数据057','数据058','数据059','数据060',
 	// '数据061','数据062','数据063','数据064','数据065',
 	// '数据066','数据067','数据068','数据069','数据070',
 	// '数据071','数据072','数据073','数据074','数据075',
 	// '数据076','数据077','数据078','数据079','数据080',
 	// '数据081','数据082','数据083','数据084','数据085',
 	// '数据086','数据087','数据088','数据089','数据090',
 	// '数据091','数据092','数据093','数据094','数据095',
 	// '数据096','数据097','数据098','数据099','数据100'
 	// ];
 	//去数据库获取数据
 	$con=mysqli_connect('localhost','root','dyl123','straw');
 	if($con)
 	{ 
 		mysqli_query($con,'set names utf8');
 		mysqli_query($con,'set character_set_client=utf8');
 		mysqli_query($con,'set character_set_results=utf8');
 
 		$sql="select * from lllist"
 		$res=$con->query($sql);
 
 		if($res->num_rows>0)
 		{ 
 			$infoArr=[];
 			for($i=0;$row=$res->fetch_assoc();$i++)
 			{ 
 				$infoArr[$i]=$row;
 			}
 		}
 
 
 	}
 
 	if(!$_GET)
 	{ 
 		$success['dataLength']=count($infoArr);
 	}else{ 
 		$res=array_slice($infoArr,($_GET['page']-1)*15,15);
 		$success['code']=$_GET['page'];
 		$success['list']=$res;
 	}
 
 	echo json_encode($success);
 ?>