提示:本人的前段和后端开发都是自学,如有错误请帮忙指正!
以前用的分页都是特别简单的只有上一页下一页哪一种的,今天自己研究了一天,稍微复杂些的分页!
实现后的效果
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);
});
});