$.ajax实现分页的方法

最新推荐文章于 2022-04-28 19:04:07 发布

T275fuyou

最新推荐文章于 2022-04-28 19:04:07 发布

阅读量160

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/T275fuyou/article/details/123808530

版权

使用$.ajax实现分页的原理：封装两个方法，一个方法用来显示，一个方法写分页。

代码展示：

//页面载入函数
	$(function(){
		//默认显示第1页
		myf('a');
	})
	//扩大作用域
	var pageIndex;
	var max;
	//写一个方法专门控制分页
	function myf(type){
		if(type=='a'){
			//首页
			pageIndex=1;
		}
		else if(type=='b'){
			//上一页
			if(pageIndex>1){
				pageIndex--;
			}
			else{
				alert("兄die，已经是第一页了嘞");
			}
		}
		else if(type=='c'){
			//下一页
			if(pageIndex<max){
				pageIndex++;
			}
			else{
				alert("兄die，已经是最后一页了嘞");
			}
		}
		else{
			//末页
			pageIndex=max;
		}
		//ajax
		$.post("page.do", {pid:pageIndex}, function(data) {
			//用*分割
			var x=data.split("*");
			//x[0]代表json格式的对象数组字符串
			//x[1]代表max值 
			//将json格式的对象数组字符串-->js的对象数组
			var ss=$.parseJSON(x[0]);
			//给max赋值
			max=parseInt(x[1]);
			var sb="<table border=\"1px\"><tr align='center'><td>商品序号</td><td>商品名称</td><td>商品图片</td></tr>";
			//循环遍历
			$.each(ss, function(i, g) {//下标，元素=对象
				sb+="<tr align='center'>";
				sb+="<td>"+g.gid+"</td>";
				sb+="<td>"+g.gname+"</td>";
				sb+="<td><img src='"+g.gpath+"'/></td>";
				sb+="</tr>";
			})
			sb+="</table>";
			sb+="["+pageIndex+"/"+max+"]";
			//给div赋值
			$("#aa").html(sb);
		})
	}
</script>
</head>
<body>
	<center>
		<img src="images/17.jpg">
		<input>
		<div id="aa"></div>
		<div>
			<a href="javascript:myf('a')">首页</a>&nbsp;
			<a href="javascript:myf('b')">上一页</a>&nbsp;
			<a href="javascript:myf('c')">下一页</a>&nbsp;
			<a href="javascript:myf('d')">末页</a>&nbsp;
		</div>
	</center>
</body>

效果展示：