zqq3436的博客

Java开发工程师成长之路

jQuery实现分页的简易操作

效果:


html代码:

<table>
<tr>
<th><a href="javascript:void(0);" ><input type="button" class="btn_little" value="首页"  id="to_first"></a></th>
<th id="nextPage"><a href="javascript:void(0);" ><input type="button" class="btn_up" value="<<上一页" id="btn_up"></a></th>
<th><a href="javascript:void(0);" ><input type="button" class="btn_down" value="下一页>>" id="btn_down"></a></th>
<th><a href="javascript:void(0);"><input type="button" class="btn_little" value="尾页"   id="to_last"></a></th>
<td class="text_grey"> 第${result.pageNo }页 共${result.pageCount }页 ${result.count }条</td>
</tr> 
</table>

Js代码:

<script type="text/javascript">
function to_first(){//到首页
	$("#curPage").val(1);
	toVist();
}
 function to_last(){//到尾页
	 $("#curPage").val("${result.pageCount}");
	 toVist();
}
 function btn_up(){//上一页
	 var curPage = parseInt("${result.pageNo}") -1;
	 if(curPage < 1){
		curPage = 1;
	 }
	 $("#curPage").val(curPage);
	 toVist();
}
 function btn_down(){//下一页
	 var curPage = parseInt("${result.pageNo}") +1;
		if(curPage > "${result.pageCount}"){
			curPage = "${result.pageCount}";
		}
		if(curPage <1){
			curPage = 1;
		}
		$("#curPage").val(curPage);
		toVist();
}

function setStus(){//分页初始化方法
		//判断是否是第一页
		var curPage = parseInt($("#curPage").val());
		if(curPage == 1){
			//首页,上一页 静止;其他释放
			$("#to_first,#btn_up").css("cursor","no-drop");//指针样式(不可点击)
			$("#to_first").attr("onclick","javascript:void(0)");
			$("#btn_up").attr("onclick","javascript:void(0)");
			if(curPage >= "${result.pageCount}"){
				//同时是尾页
				$("#to_last,#btn_down").css("cursor","no-drop");
				$("#to_last").attr("onclick","javascript:void(0)");
				$("#btn_down").attr("onclick","javascript:void(0)");
			}else{
				$("#to_last,#btn_down").css("cursor","pointer");//指针样式(小手)
				$("#to_last").attr("onclick","javascript:to_last()");
				$("#btn_down").attr("onclick","javascript:btn_down()");
			}
			 

		}else if(curPage == "${result.pageCount}"){
			//最后一页,静止;其他释放
			$("#to_last,#btn_down").css("cursor","no-drop");
			$("#to_last").attr("onclick","javascript:void(0)");
			$("#btn_down").attr("onclick","javascript:void(0)");
			$("#to_first,#btn_up").css("cursor","pointer");
			$("#to_first").attr("onclick","javascript:to_first()");
			$("#btn_up").attr("onclick","javascript:btn_up()");
		}else{
			//中间页,全部放开
			$("#to_first,#btn_up").css("cursor","pointer");
			$("#to_first").attr("onclick","javascript:to_first()");
			$("#btn_up").attr("onclick","javascript:btn_up()");
			$("#to_last,#btn_down").css("cursor","pointer");
			$("#to_last").attr("onclick","javascript:to_last()");
			$("#btn_down").attr("onclick","javascript:btn_down()");
		}
		
	}
	function toVist(){//重新访问后台
		 $("input[name='curPage']").val($("#curPage").val());
	 	 $("#formInfo").submit();
	}
	 
	$(function(){
		//初始化总页数
		 setStus();	
	});
</script>

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zqq3436/article/details/80347975
个人分类: JQuery
想对作者说点什么? 我来说一句

jQuery实现Table分页跳转

2012年07月26日 63KB 下载

使用jquery实现ajax分页含源码

2011年06月23日 10.26MB 下载

使用jquery实现表格动态分页

2013年02月04日 1.44MB 下载

jQuery分页Demo

2014年02月26日 22KB 下载

没有更多推荐了,返回首页

不良信息举报

jQuery实现分页的简易操作

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭