前言
这次带来的是ajax版的分页，写的不是很好，出现很多莫名其妙的错误，我到现在都还没搞明白。先写在以防忘记，后期有时间再改进。因为写的不怎么好，所以就直接贴代码了，不做太多的讲解。
正文
业务场景
做一个评论功能的分页。如下图：
代码
这里我就从控制层往前端写了，其他的后端代码和另外一篇教程是一样的：spring boot+mybatis+thymeleaf+pagehelper分页插件实现分页功能
控制层
@Controller
public class SingleController { //播放页面控制层
@Autowired
private SingleShowService singleShowService;
@ResponseBody
@GetMapping(value = "/selectcomments/{vid}") //查询相关视频所有的评论
public RespEntity selectComments(@PathVariable("vid") Integer vid,
@RequestParam(value = "pageNum", defaultValue = "1") int pageNum, //在参数里接受当前是第几页 pageNum,以及每页显示多少条数据 pageSize.默认值分别是1和7
@RequestParam(value = "pageSize", defaultValue = "7") int pageSize)
{
PageInfo selectcomments=singleShowService.selectComments(vid,pageNum,pageSize);
RespEntity respEntity=new RespEntity(RespCode.SUCCESS,selectcomments);
return respEntity;
}
}
html
<div>
<div id="comments" style="height:970px">
<blockquote id="comments0">
<textarea class="form-control" style="font-size: 12px;resize: none;height: 80px" readonly="readonly"></textarea>
<small>Someone famous Source Title</small>
</blockquote>
<blockquote id="comments1">
<textarea class="form-control" style="font-size: 12px;resize: none;height: 80px" readonly="readonly"></textarea>
<small>Someone famous Source Title</small>
</blockquote>
<blockquote id="comments2">
<textarea class="form-control" style="font-size: 12px;resize: none;height: 80px" readonly="readonly"></textarea>
<small>Someone famous Source Title</small>
</blockquote>
<blockquote id="comments3">
<textarea class="form-control" style="font-size: 12px;resize: none;height: 80px" readonly="readonly"></textarea>
<small>Someone famous Source Title</small>
</blockquote>
<blockquote id="comments4">
<textarea class="form-control" style="font-size: 12px;resize: none;height: 80px" readonly="readonly"></textarea>
<small>Someone famous Source Title</small>
</blockquote>
<blockquote id="comments5">
<textarea class="form-control" style="font-size: 12px;resize: none;height: 80px" readonly="readonly"></textarea>
<small>Someone famous Source Title</small>
</blockquote>
<blockquote id="comments6">
<textarea class="form-control" style="font-size: 12px;resize: none;height: 80px" readonly="readonly"></textarea>
<small>Someone famous Source Title</small>
</blockquote>
</div>
<!-- 总页数 -->
全部页数:<sapn id="allpages"></sapn>页
<!-- 当前页数 -->
当前页数:<sapn id="nowpage"></sapn>页
<center>
<ul class="pagination" id="pages">
<li>
<a id="firstpage" href="javascript:void(0)">首页</a>
</li>
<li>
<a id="prepage" href="javascript:void(0)">
<span aria-hidden="true">«</span>
</a>
</li>
<li id="ipage0">
<a href="javascript:void(0)">1</a>
</li>
<li id="ipage1">
<a href="javascript:void(0)">2</a>
</li>
<li id="ipage2">
<a href="javascript:void(0)">3</a>
</li>
<li id="ipage3">
<a href="javascript:void(0)">4</a>
</li>
<li id="ipage4">
<a href="javascript:void(0)">5</a>
</li>
<li>
<a id="nextpage" href="javascript:void(0)">
<span aria-hidden="true">»</span>
</a>
</li>
<li>
<a id="endpage" href="javascript:void(0)">末页</a>
</li>
</ul>
</center>
<!-- 上一页页数 -->
<sapn style="display: none" id="apage"></sapn>
<!-- 下一页页数 -->
<sapn style="display: none" id="zpage"></sapn>
</div>
ajax 最费时间的就是ajax中对下面分页栏的处理，一直出一些我搞不懂的问题，像让分页栏中对应当前页面的按钮的样式和其他不一样一直不成功（就是我注释掉的代码块，所以我只能在前端加上span标签说明当前是第几页），等等一些问题。所以你们参考参考就行了。
$(document).ready(function () {
selectcomments(1); //开始进页面时第一页
//---------分页栏处理 首页、末页、上一页、下一页---------
$("#firstpage").click(function () { //首页
selectcomments(1);
}
);
$("#prepage").click(function(){ //上一页
selectcomments($("#apage").text());
}
);
$("#nextpage").click(function(){ //下一页
selectcomments($("#zpage").text());
}
);
$("#endpage").click(function () { //末页
selectcomments($("#allpages").text());
}
);
$("#ipage0 a").click(function(){ //数字1页
selectcomments($("#ipage0 a").text());
}
)
$("#ipage1 a").click(function(){ //数字2页
selectcomments($("#ipage1 a").text());
}
)
$("#ipage2 a").click(function(){ //数字3页
selectcomments($("#ipage2 a").text());
}
)
$("#ipage3 a").click(function(){ //数字4页
selectcomments($("#ipage3 a").text());
}
)
$("#ipage4 a").click(function(){ //数字5页
selectcomments($("#ipage4 a").text());
}
)
})
function selectcomments(pageNum) { //查询相关视频所有的评论
$("#comments blockquote").css('display','block') //恢复评论框
for(var y=0;y<5;y++){
$("#ipage"+y).css('display','inline'); //恢复页码
}
var vid=$("#vid").text();
var url="/selectcomments/"+vid+"?pageNum="+pageNum;
$.ajax({
url:url,
type:"GET",
dataType:"JSON",
success:function (data) {
if(data.code==0){
//把多余的评论框隐藏起来
for(var l=6;l>=data.data.list.length;l--){ //data.data.list.length当前一页中评论的数量
$("#comments"+l).css('display','none'); //隐藏
}
//把评论放到指定位置
$.each(data.data.list, function(i,val) { //两个参数，第一个参数表示遍历的数组的下标(0开始)，第二个参数表示下标对应的值
var commentsid="#comments"+i;
$(commentsid+" textarea").text(val.comment); //评论
var small=" <i class='fa fa-user'></i>"+val.user.username+" <i class='fa fa-calendar'></i>"+val.commenttime;
$(commentsid+" small").html(small); //用户名+评论时间
})
//把数据放到html隐藏标签内，方便分页栏下次调用
$("#allpages").text(data.data.pages); //总页数
$("#nowpage").text(data.data.pageNum); //当前页数
if (data.data.prePage<1){ //上一页
$("#apage").text(1);
}else {
$("#apage").text(data.data.prePage);
}
if(data.data.nextPage==0){ //下一页
$("#zpage").text(data.data.pages);
}else{
$("#zpage").text(data.data.nextPage);
}
//显示出当前页面对应的按钮
// for(var z=0;z<5;z++)
// {
// var ipage=$("#ipage"+z+" a").text();
// if(ipage==data.data.pageNum){
// $("#ipage"+z+" a").css({"background-color":"red","color":"white"}); //让当前页的按钮显示红色
// }else{
// $("#ipage"+z+" a").css({"background-color":"white","color":"black"}); //恢复样式
// }
// }
//---------分页栏处理 中间数字块---------
if(data.data.pages>5){ //如果全部总页数大于5
if(data.data.pageNum<4){ //当前页数小于等于3
$("#ipage0 a").text(1);
$("#ipage1 a").text(2);
$("#ipage2 a").text(3);
$("#ipage3 a").text(4);
$("#ipage4 a").text(5);
}else{
if(data.data.pageNum>(data.data.pages-2)){ //如果页数大于等于总页数-2时
$("#ipage0 a").text(data.data.pages-4);
$("#ipage1 a").text(data.data.pages-3);
$("#ipage2 a").text(data.data.pages-2);
$("#ipage3 a").text(data.data.pages-1);
$("#ipage4 a").text(data.data.pages);
}else{
$("#ipage0 a").text(data.data.pageNum-2);
$("#ipage1 a").text(data.data.pageNum-1);
$("#ipage2 a").text(data.data.pageNum);
$("#ipage3 a").text(data.data.pageNum+1);
$("#ipage4 a").text(data.data.pageNum+2);
}
}
}
if(data.data.pages<5){ //如果全部总页数小于5
for(var i=0;i<data.data.pages;i++){
$("#ipage"+i+" a").text(i+1);
}
for(var y=data.data.pages;y<5;y++){
$("#ipage"+y).css('display','none');
}
}
}
}
})
}
问题修改
关于分页栏数字显示当前页面的功能，昨天一晚上没有弄出来。昨天晚上在睡觉时理了一下思路，突然明白错在哪了。
......上面代码省略
//---------分页栏处理 中间数字块---------
if(data.data.pages>5){ //如果全部总页数大于5
if(data.data.pageNum<4){ //当前页数小于等于3
$("#ipage0 a").text(1);
$("#ipage1 a").text(2);
$("#ipage2 a").text(3);
$("#ipage3 a").text(4);
$("#ipage4 a").text(5);
}else{
if(data.data.pageNum>(data.data.pages-2)){ //如果页数大于等于总页数-2时
$("#ipage0 a").text(data.data.pages-4);
$("#ipage1 a").text(data.data.pages-3);
$("#ipage2 a").text(data.data.pages-2);
$("#ipage3 a").text(data.data.pages-1);
$("#ipage4 a").text(data.data.pages);
}else{
$("#ipage0 a").text(data.data.pageNum-2);
$("#ipage1 a").text(data.data.pageNum-1);
$("#ipage2 a").text(data.data.pageNum);
$("#ipage3 a").text(data.data.pageNum+1);
$("#ipage4 a").text(data.data.pageNum+2);
}
}
}
if(data.data.pages<5){ //如果全部总页数小于5
for(var i=0;i<data.data.pages;i++){
$("#ipage"+i+" a").text(i+1);
}
for(var y=data.data.pages;y<5;y++){
$("#ipage"+y).css('display','none');
}
}
//显示出当前页面对应的按钮
for(var z=0;z<5;z++)
{
var ipage=$("#ipage"+z+" a").text();
if(ipage==data.data.pageNum){
$("#ipage"+z+" a").css({"background-color":"red","color":"white"}); //让当前页的按钮显示红色
}else{
$("#ipage"+z+" a").css({"background-color":"white","color":"black"}); //恢复样式
}
}
......下面代码省略
正确的写法应该是把设置按钮样式的方法写在变换按钮数字的方法下面。因为之前写在上面就会发生先变换按钮样式再变换按钮数字就会出现混乱。下面上图：
错误写法时的图片：
一开始的数字就是12345页，到第三页时点击下一页，如下图就会把5标红显示当前页为第五页，而其实当前为第4页。正是因为先把上图第四页的位置按钮标红，再变换数字，这样就会变成下图的情况。
正确写法时的图片：
到第三页时再点击下一页，就变成下面的图，这就正确的标识当前页面是第四页。
扫一扫
1369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
