使用Jquery,Ajax实现分页一看就懂!

伍拾伍

于 2019-09-01 18:30:39 发布

阅读量490

点赞数 6

分类专栏： Jquery HTML 文章标签： HTML Jquery

本文链接：https://blog.csdn.net/qq_43165468/article/details/100185449

版权

HTML 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Jquery

1 篇文章 0 订阅

订阅专栏

1.首先我们先创建一个分页的辅助类
在这里插入图片描述
pageIndex:当前页
pageSize:页大小
totaCount:总数量
totaPageNumber:总页数
pagedata:当前页数据
持久层和业务层这里就不介绍了
控制器：

有数据之后我们在前端就可以接收到了

<script type="text/javascript">
		function selAll(index){
			$.ajax({
				url: "student/selAll",//控制器路径
				type: "post",
				data: {"index":index},//当前页
				dataType:"json",
				success: function(data){
					var str="";
					$.each(data.pagedata,function(a,b){
						str+="<tr>"
						str+="<td>"+b.id+"</td>"
						str+="<td>"+b.name+"</td>"
						str+="<td>"+b.leaveTime+"</td>"
						str+="<td>"+b.reason+"</td>"
						str+="<td><a >删除</a></td>"
						str+="</tr>"
					})
					$("#info").html("");
					$("#info").append(str);
					var fy="";
					var topIndex=data.pageIndex>1?data.pageIndex-1:1;//上一页
					var bomindex=data.pageIndex<data.totaPageNumber?data.pageIndex+1:data.pageIndex;//下一页
					var lastIndex=data.totaPageNumber;//末页
					fy+='<a href="javascript:selAll(1)">首页</a>&nbsp; &nbsp';
	  				fy+='<a href="javascript:selAll('+topIndex+')">上一页</a>&nbsp; &nbsp';
	  				fy+='<a href="javascript:selAll('+bomindex+')">下一页</a>&nbsp; &nbsp';
		 			fy+='<a href="javascript:selAll('+lastIndex+')">尾页</a>';
		 			fy+="第"+data.pageIndex+"/共"+data.totaPageNumber+"";
		 			$("#chu").html(""); 
					$("#chu").append(fy); 
				},
				error:function(){
					alert("内部服务器出现异常");
				}
			})
		}
	</script>

最后加载调用就行了
在这里插入图片描述
运行结果:

谢谢大家观看