版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_24691413/article/details/78558789
这个分页的实现要结合数据库 java
代码我就不贴了
html 代码
<form>
<div class="paging">
<a id="firstpage" onclick="topage(1)">首页</a>
<!-- <input id="firstpage" type="button" value="首页" /> -->
<a id="frontpage" onclick="tofrontpage()">上一页</a>
<a id="l_2" onclick="topage(this.text)" >1</a>
<a id="l_1" onclick="topage(this.text)"> 2</a>
<a id="self" onclick="topage(this.text)">3</a>
<a id="r_1" onclick="topage(this.text)">4</a>
<a id="r_2" onclick="topage(this.text)">5</a>
<a id="afterpage" onclick="toafterpage()">下一页</a>
<a id="lastpage" onclick="topage(-1)">末页</a>
<input id="mynumber" type="number" size="2" value=1 />
<input type="button" onclick="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>哈哈哈 碉堡了
这是效果 有没有小白愿意膜拜我一下
