【原创】使用jquery 使用jquery ajax 实现分页 关键代码。。。

这个分页的实现要结合数据库  java     

代码我就不贴了 

html 代码

<form>
       	<div class="paging">
			<a id="firstpage" οnclick="topage(1)">首页</a>
			<!-- <input id="firstpage" type="button" value="首页" /> -->
			<a id="frontpage" οnclick="tofrontpage()">上一页</a>
			<a id="l_2"  οnclick="topage(this.text)" >1</a>
			<a id="l_1"  οnclick="topage(this.text)"> 2</a>
			<a id="self"  οnclick="topage(this.text)">3</a>
			<a id="r_1"  οnclick="topage(this.text)">4</a>
			<a id="r_2"   οnclick="topage(this.text)">5</a>
			<a id="afterpage" οnclick="toafterpage()">下一页</a>
			
				<a id="lastpage" οnclick="topage(-1)">末页</a>
			<input id="mynumber" type="number"   size="2" value=1 />
			<input type="button" οnclick="tojump()" value="跳转" />
			<font>页数：<font id="nowcount"></font >/<span id="pagecount"></span ></font>
		</div>
		</form>

jquery  与 ajax 代码

<script type="text/javascript">
	/* 这是一个很重要的方法  通过这个方法  完成页面的跳转 */
	function topage(index){
		//点击标签进入这个方法了  首先需要做的事情是得到要前往的 页数
			//data是传过来的参数
			//我感觉这个方法如过有总页数的参与会更便利。
			var pagecount=$("#pagecount").text();//获取总页数
			
			if(index==-1){
				index=pagecount;
			}
			//根据传过来的页数去前台拿数据
			$.ajax({
		        "url"       : "NewsPagingServlet",//要提交的URL路径
		        "type"      : "get",           //发送请求的方式
		        "data"      : {"flag":"doGetNews","index":index},//要发送到服务器的数据
		        "dataType"  : "json",//指定返回的数据格式
		        "success"   :  function callBack(data) {
		        	var con="";
		        	$.each(data,function(index,value){
		        		var s1=value.title;
		        		var s2=value.date;
		        		var s3=value.newsId;
		        		con+=" <li><a href='"+$ctx+"/NewsDetails?id="+s3+"'> "+s1+" </a><span> "+s2+"</span></li>";
		        		if((index+1)%5==0&&index!=0){
		        			con+="<li class='space'></li>";
		        		}
		        	});
		        	//下面操作新闻列表 
		        	$(".classlist").html("");//先清空列表
		        	$(".classlist").prepend(con);//后添加列表
		        	//执行判断   
		        	if(index==1){//如果index的页数小于3  则 5个页码为1-5
		        		$("#l_2").text(1).css({"pointer-events":"none","cursor":"default"});
			        	$("#l_1").text(2).css({"pointer-events":"auto","cursor":"auto"});
	        			$("#self").text(3).css({"pointer-events":"auto","cursor":"auto"});
	        			$("#r_1").text(4).css({"pointer-events":"auto","cursor":"auto"});
	        			$("#r_2").text(5).css({"pointer-events":"auto","cursor":"auto"});
	        			$(".paging font font").text(1);
		        	}else if (index==2){
		        		$("#l_2").text(1).css({"pointer-events":"auto","cursor":"auto"});
			        	$("#l_1").text(2).css({"pointer-events":"none","cursor":"default"});
	        			$("#self").text(3).css({"pointer-events":"auto","cursor":"auto"});
	        			$("#r_1").text(4).css({"pointer-events":"auto","cursor":"auto"});
	        			$("#r_2").text(5).css({"pointer-events":"auto","cursor":"auto"});
	        			$(".paging font font").text(2);
		        		
		        	}else if(index==pagecount){//获取的是从总页数起   倒数5页
		        		$("#l_2").text(pagecount-4).css({"pointer-events":"auto","cursor":"auto"});
			        	$("#l_1").text(pagecount-3).css({"pointer-events":"auto","cursor":"auto"});
	        			$("#self").text(pagecount-2).css({"pointer-events":"auto","cursor":"auto"});
	        			$("#r_1").text(pagecount-1).css({"pointer-events":"auto","cursor":"auto"});
	        			$("#r_2").text(pagecount).css({"pointer-events":"none","cursor":"default"});
	        			$(".paging font font").text(pagecount);
		        	}else if(index==((pagecount-1))){
		        		$("#l_2").text(pagecount-4).css({"pointer-events":"auto","cursor":"auto"});
			        	$("#l_1").text(pagecount-3).css({"pointer-events":"auto","cursor":"auto"});
	        			$("#self").text(pagecount-2).css({"pointer-events":"auto","cursor":"auto"});
	        			$("#r_1").text(pagecount-1).css({"pointer-events":"none","cursor":"default"});
	        			$("#r_2").text(pagecount).css({"pointer-events":"auto","cursor":"auto"});
	        			$(".paging font font").text((pagecount-1));
		        	}
		        	else{//看到这里  您可能会问了   如果不足5页 呢  那  是进哪个if呢 ？如果不足5页    是进不了这个方法的 
		        		
		        		$("#l_2").text((parseInt(index)-2)).css({"pointer-events":"auto","cursor":"auto"});
		        		$("#l_1").text((parseInt(index)-1)).css({"pointer-events":"auto","cursor":"auto"});
	        			$("#self").text(index).css({"pointer-events":"none","cursor":"default"});
	        			$("#r_1").text((parseInt(index)+1)).css({"pointer-events":"auto","cursor":"auto"});
	        			$("#r_2").text((parseInt(index)+2)).css({"pointer-events":"auto","cursor":"auto"});
	        			$(".paging font font").text(index);
		        	}
		        },        //响应成功后要执行的代码
			});
	}
	function tofrontpage(){
		var index=$(".paging font font").text();
		index = parseInt(index);
		if(index!=1){
			index=index-1;
		}
		topage(index);
	}
 	function toafterpage(){
		var index=$(".paging font font").text();//获取当前页
		index = parseInt(index);
		var pagecount=$(".paging font span").text();//获取总页
		pagecount=parseInt(pagecount);
		if(index!=pagecount){
			index=index+1;
		}
		topage(index);
	}
 	function tojump(){
		var index=$("#mynumber").val();//获取当前页
		index = parseInt(index);
		topage(index);
	}
 

</script>

哈哈哈    碉堡了  

这是效果   有没有小白愿意膜拜我一下