模仿百度分页（Ajax异步加载）

做法：

1.先在界面填几块div，处理一下样式，不过因为只是Demo，所以也就没做太多处理了。

2.通过Ajax异步加载后台的分页后的数据。

3.前台接收到数据后，动态生成标签，并对标签进行渲染。

4.动态生成标签的时候需要注意点。

<html>
 <body>
 <div class="bc_bg">
 	<div class="menu">
	 <div class="list_bg">
		<table border="1">
			
		</table>
	</div>
	<div class="bt_bg">
 
	</div>
	</div>
</div>
 </body>
</html>

CSS代码：

	.now-page{}
	
	body{
		margin-top:0px;
		margin-bottom:0px;
		background-color:#CCCCCC;
	}
	
	.menu{
		padding-top:100px;
		
		width:300px;
		height:300px;
		margin:auto auto auto auto;
	}	
	
	.bc_bg{
		height:900px;
		width:90%;
		margin:auto auto auto auto;
		background-color:#FFFFFF;	
	}
	
	/*显示列表样式设置*/
	.list_bg{
		padding-bottom:50px;
	}
	
	table{
		width:200px;
		height:300px;
	}
 
	/*分页按钮样式设置*/
	.bt_bg{
		
		width:290px;
		height:60px;
		/*background-color:blue;*/
	}
 
	/*button样式设置*/
	.tagbg{
		float:left;
		height:60px;
		width:50px;
		position:relative;
		/*background-color:red;*/
	}
	.ud{
		float:left;
		height:60px;
		width:70px;
		position:relative;
		/*background-color:green;*/
	}
	.button{
		height:30px;
		border-style:solid;
		border-width:1px;
		color:blue;
		position:absolute;
		bottom:0px;
		right:0px;
		border-color:#DDDDDD;
		background-color:white;
	}
	.buttonhover{
		background-color:#BBFFEE;
		border-color:blue;
	}
	.now-page{
		width:50px;
	}
	.pnpage{
		width:70px;
	}

JS代码：

	//定义一个全局变量，用于处理当用户点击上一页或者下一页的时候计算
	var nowPage = 0;
	//总页数，用户可能会对数据进行操作，所以每次加载都要重新从数据库进行计算页数
	var pgCount;
	
	$(document).ready(function(){
		getPage(0);//刚开始显示第0页
	
		$(".now-page").live("click",function() {//点击事件
			if (nowPage != $(this).attr("key")){
				getPage($(this).attr("key"));
				$("button").css("color","black");
			}
		});
		
		$(".prev-page").live("click",function() {
		//如果用户点击了上一页按钮，且当前按钮不为第0页，则跳到上一页
			if(nowPage >= 1){
				getPage(nowPage - 1);
			}
		});
		
		$(".next-page").live("click",function() {
		//同上
			if (nowPage <= (pgCount-1)){
				getPage(nowPage + 1);
			}
		});
	});
	
	/**
		渲染标签
	*/
	function renderingCss(){//jQuery渲染标签
		$(".tagbg").addClass("tagbg");
		$(".ud").addClass("ud");
		$("button").addClass("button");
		$(".now-page").addClass("now-page");
		$(".prev-page,.next-page").addClass("pnpage");
		//鼠标悬停样式
		$("button").mouSEOver(function(){
			$(this).css({"background-color":"#BBFFEE","border-color":"blue"});
		});
		$("button").mouSEOut(function(){
			$(this).css({"background-color":"white","border-color":"#DDDDDD"});
		});
		$(".index").css({"border-width":"0px","color":"black"});
	}
	
	/**
		生成标签
	*/
	function createPage(data,pagenum){
		nowPage = pagenum;
		var jsonResult = data.jsonResult;
		pgCount = Math.ceil(parseInt(data.count)/3);//ceil向上取整
		$("table").empty();
		$(".bt_bg").empty();
		$("table").append("<tr><th>username</th><th>password</th></tr>");
		for (var i = 0; i < jsonResult.length; i++){
			$("table").append("<tr><td>"+jsonResult[i].username+"</td> "+"<td>"+jsonResult[i].password+"</td></tr>");
		}
		//分页标签
		if (nowPage > 0){
			$(".bt_bg").append("<div class='ud'><button class='prev-page'><上一页</button></div>");
		}
		for (var i = 0; i < pgCount; i++){
			//$(".bt_bg").append("<div class='tagbg'>");
			if (i != nowPage){
				$(".bt_bg").append("<div class='tagbg'><button class='now-page' key='" + i + "'>" + (i + 1) + "</button></div>");
			}else{
				//如果是当前页，则设置当前页对应的按钮不可用
				$(".bt_bg").append("<div class='tagbg'><button disabled='disabled' class='now-page index' key='" + i + "'>" + (i + 1) + "</button></div>");
			}
			//$(".bt_bg").append("</div>");
		}
		if (nowPage < pgCount-1){
			$(".bt_bg").append("<div class='ud'><button class='next-page'>下一页></button></div>");
		}		
	}
	
	function getPage(pagenum){
		$.ajax({ 
				data:{
					page: pagenum
				},type: "post",url: "getUser.action",dataType: "json",success: function (data){
					//alert(data.jsonResult[0].username);
					//alert(jsonResult[0].username);
					//alert(typeof pgCount);
					//alert(parseInt(data.count));String转换成int
					//alert(typeof parseInt(data.count));判断数据类型
					createPage(data,pagenum);
					renderingCss();
				},error: function (XMLHttpRequest,textStatus,errorThrown) { 
					alert('ERROR'); 
				} 
		});
	}

结果：

模仿百度分页（Ajax异步加载）

猜你在找的Ajax相关文章