1.在后台controller中使用pageable,评论自动分页.
//第一个参数表示，第几页
//第二参数表示，一页多少条记录
Pageable pageable = new PageRequest(page, 3, Sort.Direction.ASC, "id");
2.后台controller代码
@RequestMapping("find/{id}/{page}")
public Map getPageComments(@PathVariable("id") Long id,@PathVariable("page") Integer page){
Map m = new HashMap();
Pageable pageable=new PageRequest(page,3,Sort.Direction.ASC,"id");
Page<Comment> ls=commentRepository.findByDetailid(id,pageable);
List<String> ls2 = new ArrayList<String>();
if(ls.getContent()!=null) {
for(int i=0;i<ls.getContent().size();i++) {
String authorName=userRepository.findById(ls.getContent().get(i).getAuthorid()).getUserame();
ls2.add(authorName);
}
}
m.put("comments", ls);
m.put("authorname", ls2);
return m;
}
3.在detail.js中根据后台返回的数据,利用循环显示评论与评论页数.并利用class选择器,substring方法获取当前评论页数,然后实现评论页面跳转,利用ajax实现局部刷新.
4.detail.js原始代码
$(document).ready(function(){
var url = decodeURI(location.href);
var result = url.split("?")[1];
$.get("/spring/detail/find/"+result, function(data){
// console.log(data);
// console.log(data.detail.title);
$("#titleid").text(data.detail.title);
$("#bodyid").html(data.detail.content);
// console.log(data.comments);
var date=new Date(data.detail.createtime);
$("#dtime").text(date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate());
$("#commentcount").text(data.comments.totalElements);
var commentstr="";
for(var i=0;i<data.comments.content.length;i++){
// console.log(data.comments.content[i].createtime);
var date=new Date(data.comments.content[i].createtime);
commentstr=commentstr+'<li class="comment even thread-even depth-1" id="li-comment-"> <div id="comment-969" class="comment_body contents"> <div class="profile"> <a href="/spring/demo/index/"><img src="/spring/demo/index/statics/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg" class="gravatar" alt="小布丁"></a> </div> <div class="main shadow"> <div class="commentinfo"> <section class="commeta"> <div class="shang"> <h4 class="author"><a href="/spring/demo/index/" target="_blank" id="commentatr">'+data.authorname[i]+'<img src="/spring/demo/index/statics/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg" class="gravatarsmall"></a></h4> </div> </section> </div> <div class="body"> <p id="cbid">'+data.comments.content[i].content+'</p> </div> <div class="xia info"> <span><time id="ctime">'+date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日'+'</time></span> <span><a rel="nofollow" class="comment-reply-link" href="/spring/demo/index/" onclick="return addComment.moveForm( "comment-969", "969", "respond", "1202" )" aria-label="回复给小布丁">回复</a></span> </div> </div> </div> </li>';
}
$("#cwrap").html(commentstr);
var commentpage="<a class='prev page-numbers' style='cursor:pointer;'><</a>";
var currentpage=0;
for(var j=1;j<=data.comments.totalPages;j++){
commentpage=commentpage+"<a class='page-numbers' style='cursor:pointer;' id=pagenum"+j+">"+j+"</a>";
}
$("#comments-navicc").html(commentpage);
$("#pagenum1").addClass("current");
$(".page-numbers").click(function(){
// alert($(this).attr("id"));
var pagenum=$(this).attr("id").substring(7);
$.get("/spring/detail/find/"+result+"/"+(pagenum-1), function(data){
var commentstr2="";
for(var i=0;i<data.comments.content.length;i++){
// console.log(data.comments.content[i].createtime);
var date2=new Date(data.comments.content[i].createtime);
commentstr2=commentstr2+'<li class="comment even thread-even depth-1" id="li-comment-"> <div id="comment-969" class="comment_body contents"><div class="profile"> <a href="/spring/demo/index/"><img src="/spring/demo/index/statics/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg" class="gravatar" alt="小布丁"></a></div><div class="main shadow"><div class="commentinfo"><section class="commeta"><div class="shang"><h4 class="author"><a href="/spring/demo/index/" target="_blank" id="commentatr">'+data.authorname[i]+'<img src="/spring/demo/index/statics/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg" class="gravatarsmall"></a></h4></div></section></div><div class="body"><p id="cbid">'+data.comments.content[i].content+'</p></div><div class="xia info"><span><time id="ctime">'+date2.getFullYear()+'年'+(date2.getMonth()+1)+'月'+date2.getDate()+'日'+'</time></span><span><a rel="nofollow" class="comment-reply-link" href="/spring/demo/index/" onclick="return addComment.moveForm( "comment-969", "969", "respond", "1202" )" aria-label="回复给小布丁">回复</a></span></div></div></div></li>';
for(j=1;j<=data.comments.totalPages;j++){
$("#pagenum"+j).removeClass("current");
}
$("#pagenum"+pagenum).addClass("current");
}
$("#cwrap").html(commentstr2);
});
});
});
});
5.将detail.js中的方法进行封装,并添加功能:显示前一页评论.
$(document).ready(function(){
var url = decodeURI(location.href);
var result = url.split("?")[1];
$.get("/spring/detail/find/"+result, function(data){
$("#titleid").text(data.detail.title);
$("#bodyid").html(data.detail.content);
var dtime=dateFormatter(data.detail.createtime);
$("#dtime").text(dtime);
$("#commentcount").text(data.comments.totalElements);
console.log(data.comments.totalPages);
console.log(data.comments.content.length);
showComment(data.comments,data.authorname);
showCommentPage(data.comments);
showCommentOfSelectedPage(data.comments,data.authorname,result);
showCommentOfPrevPage(data.comments,data.authorname,result);
});
});
//日期格式化
function dateFormatter(date1){
var date = new Date(date1);
var year =date.getFullYear()+'年';
var month =(date.getMonth()+1)+'月';
var day = date.getDate()+'日';
var formatDate=year+month+day;
return formatDate;
}
//显示评论
function showComment(comment,authorname){
var commentstr="";
for(var i=0;i<comment.content.length;i++){
var ctime = dateFormatter(comment.content[i].createtime);
commentstr=commentstr+'<li class="comment even thread-even depth-1" id="li-comment-"> <div id="comment-969" class="comment_body contents"> <div class="profile"> <a href="/spring/demo/index/"><img src="/spring/demo/index/statics/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg" class="gravatar" alt="小布丁"></a> </div> <div class="main shadow"> <div class="commentinfo"> <section class="commeta"> <div class="shang"> <h4 class="author"><a href="/spring/demo/index/" target="_blank" id="commentatr">'+authorname[i]+'<img src="/spring/demo/index/statics/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg" class="gravatarsmall"></a></h4> </div> </section> </div> <div class="body"> <p id="cbid">'+comment.content[i].content+'</p> </div> <div class="xia info"> <span><time id="ctime">'+ctime+'</time></span> <span><a rel="nofollow" class="comment-reply-link" href="/spring/demo/index/" onclick="return addComment.moveForm( "comment-969", "969", "respond", "1202" )" aria-label="回复给小布丁">回复</a></span> </div> </div> </div> </li>';
}
$("#cwrap").html(commentstr);
}
//显示评论页数
function showCommentPage(comment){
var commentpage="<a class='prev-page' style='cursor:pointer;'><</a>";
var currentpage=0;
for(var i=1;i<=comment.totalPages;i++){
commentpage=commentpage+"<a class='page-numbers' style='cursor:pointer;' id=pagenum"+i+">"+i+"</a>";
}
$("#comments-navicc").html(commentpage);
$("#pagenum1").addClass("current");
}
//显示评论选中页
function showCommentOfSelectedPage(comment,authorname,result){
$(".page-numbers").click(function(){
var pagenum=$(this).attr("id").substring(7);
$.get("/spring/detail/find/"+result+"/"+(pagenum-1), function(data){
showComment(data.comments,data.authorname);
for(i=1;i<=comment.totalPages;i++){
$("#pagenum"+i).removeClass("current");
}
$("#pagenum"+pagenum).addClass("current");
});
});
}
//显示评论前一页
function showCommentOfPrevPage(comment,authorname,result){
$(".prev-page").click(function(){
var pagenum=$(".page-numbers.current").attr('id').substring(7);
if(pagenum>1){
$.get("/spring/detail/find/"+result+"/"+(pagenum-2), function(data){
showComment(data.comments,data.authorname);
});
for(i=1;i<=comment.totalPages;i++){
$("#pagenum"+i).removeClass("current");
}
$("#pagenum"+(pagenum-1)).addClass("current");
}
});
}
6.效果图
