jquery实现分页的实战和思路的总结

提示:本人的前段和后端开发都是自学,如有错误请帮忙指正!

以前用的分页都是特别简单的只有上一页下一页哪一种的,今天自己研究了一天,稍微复杂些的分页!

实现后的效果

html代码

<%
	//获取分页用到的p
	String p=request.getParameter("p");
%>
<body>
<div class="personalCard_page">
			<span class="previousPage">上一页</span>
			<span class="page">1</span>
			<span class="page">2</span>
			<span class="page">3</span>
			<span  class="page">4</span>
			<span  class="page">5</span>
			<span  class="page">6</span>
			<span  class="page">7</span>
			<span  class="page">8</span>
			<span  class="page">9</span>
			<span  class="page">10</span>
			<span  class="page">11</span>
			<span  class="nextPage">下一页</span>
			<span >60</span>
		</div>
    <input id="p" type="text" value=<%=p%> />
</body>

jquery代码

$(function(){
		$(".page").bind("click",function(){
				window.location.href="personalCard.jsp?p="+$(this).html();
			})
		if($("#p").val()>1){
			$(".previousPage").show();
		}

		if(parseInt($("#p").val())>6){
			num=$("#p").val()-6;
			$(".page").each(function(i){
				$(".page").eq(i).html(i+1+num);
			})
		};
		
		 $(".page").each(function(i){
				if($(".page").eq(i).html()==$("#p").val()){
					$(this).css({"background":"#FF7256"});
					$(this).css({"color":"#FFFFFF"});
				}
			}) 
			
		//点击上一页
		$(".previousPage").bind("click",function(){
			window.location.href="http://localhost:8080/shiliudaohang/personalCard.jsp?p="+($("#p").val()-1);
			});
		 
		//点击下一页
			$(".nextPage").bind("click",function(){
				window.location.href="http://localhost:8080/shiliudaohang/personalCard.jsp?p="+(parseInt($("#p").val())+1);
			});
		});	

猜你喜欢

转载自blog.csdn.net/qq_38922435/article/details/81223302