分页器实现

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

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('<span class="first">首页</span>');
			obj.append("<span class='before'>上一页</span>");
		
		}else{ //默认页即首页，取消首页
			obj.append('<span class="before disable">上一页</span>');
		}
		//前引号出现范围
		if(now>3&&now<=all&&all>5)
		{
			obj.append('<span class="ell">...</span>');
		}
		//默认页面显示的左右页面范围
		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('<span class="page">'+start+'</span>');
				}else{//给默认页面添加样式
					obj.append("<span class='page on'>"+start+"</span>")
				}
			}
		}
		//后省略号的出现范围
		if(now<all-2&&all>4&&now>=1)
		{
			obj.append("<span class='ell'>...</span>")
		}
		//下一页和尾页出现的情况
		if(now<all){
			obj.append('<span class="next">下一页</span>');
			obj.append("<span class='end'>尾页</span>");
		}else{
			obj.append('<span class="next disable">下一页</span>');
		}
		
	}
	
	//绑定事件
	//传入需要绑定的总页数
	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);
?>