js实现分页
方式一:
1、html页面
<!-- 下面要展示的代码 -->
<div id="commentDiv">
<div>
{% for comment in comment_list %}
<div class="col-12 list row">
<div class="col-2 icon">
<img src="/avatar/{{comment.avatar}}" class="img-fluid" style="width: 70px;">
</div>
<div class="col-10 comment">
<div class="col-12 row" style="padding: 0px;">
<div class="col-7 commenter">{{comment.nickname}} {{comment.createtime}}
</div>
<div class="col-5 reply">
<!-- 文章作者、管理员和评论者只能回复和隐藏,不能点赞-->
{% if dict['userid'] == session.get("userid") or session.get('role') == "admin" or
comment.userid == session.get("userid") %}
<label onclick="gotoReply('{{comment.commentid}}')">
<i class="bi bi-chat-left-dots-fill"></i>回复
</label>
<label onclick="hideComment(this, '87')">隐藏</label>
{% else %}
<label onclick="gotoReply('{{comment.commentid}}')">
<i class="bi bi-chat-left-dots-fill"></i>回复
</label>
<label onclick="agreeComment(this, '{{comment.commentid}}')">
<i class="bi bi-hand-thumbs-up-fill"></i>赞成<span>{{comment.agreecount}}</span>
</label>
<label onclick="opposeComment(this, '{{comment.commentid}}')">
<i class="bi bi-hand-thumbs-down-fill"></i>反对<span>{{comment.opposecount}}</span>
</label>
{% endif %}
<!-- 其他用户只能回复和点赞,不能隐藏 -->
</div>
</div>
<div class="col-12 content">
{{comment.content}}
</div>
</div>
</div>
{% if comment["reply_list"] %}
{% for reply in comment["reply_list"] %}
<div class="col-12 list row">
<div class="col-2 icon">
<img src="/avatar/{{reply.avatar}}" class="img-fluid" style="width: 35px;">
</div>
<div class="col-10 comment" style="border: solid 1px #ccc">
<div class="col-12 row" style="padding: 15px;">
<div class="col-7 commenter" style="color: #337AB7">{{reply.nickname}} 回复 {{comment.nickname}} {{reply.createtime}}</div>
<div class="col-5 reply">
<!-- 已回复的内容不在回复-->
{% if dict['userid'] == session.get("userid") or session.get('role') == "admin" or
comment.userid == session.get("userid") %}
<label onclick="hideComment(this, '{{reply.commentid}}')">隐藏</label>
{% else %}
<label onclick="agreeComment(this, '{{reply.commentid}}')">
<i class="bi bi-hand-thumbs-up-fill"></i>赞成<span>{{reply.agreecount}}</span>
</label>
<label onclick="opposeComment(this, '{{reply.commentid}}')">
<i class="bi bi-hand-thumbs-down-fill"></i>反对<span>{{reply.opposecount}}</span>
</label>
<!-- 其他用户只能回复和点赞,不能隐藏 -->
{% endif %}
</div>
</div>
<div class="col-12">
{{reply.content}}
</div>
</div>
</div>
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>
<!-- 上出要展示的代码 -->
<!-- 页码 -->
{% if total >1 %}
<div class="col-12 paginate">
<label onclick="gotoPage('{{dict.articleid}}','prev')">上一页</label>
{% for i in range(total) %}
<label onclick="gotoPage('{{dict.articleid}}','{{i+1}}')">{{i+1}}</label>
{% endfor %}
<label onclick="gotoPage('{{dict.articleid}}','next')">下一页</label>
</div>
{% endif %}
js核心代码代码
var PAGE = 1;
var TOTAL = {{total}}
console.log("aaa" + TOTAL + PAGE)
function gotoPage(articleid, type) {
if (type == 'prev') {
if (PAGE > 1)
PAGE -= 1;
} else if (type == 'next') {
if (PAGE < TOTAL) {
PAGE += 1;
}
} else {
PAGE = parseInt(type);
}
fillComment(articleid, PAGE);
}
function fillComment(articleid, pageid) {
$("#commentDiv").empty();
var content = "";
$.get("/comment/" + articleid + "-" + pageid, function (data) {
var comment = data;
for (var i in comment) {
content += '<div class="col-12 list row">';
content += '<div class="col-2 icon">';
content += '<img src="/avatar/' + comment[i]['avatar'] + '" class="img-fluid" style="width: 70px;">';
content += '</div>';
content += '<div class="col-10 comment">';
content += '<div class="col-12 row" style="padding: 0px;">';
content += '<div class="col-7 commenter">';
content += comment[i]['nickname'];
content += ' ' + comment[i]['createtime'];
content += '</div>';
content += '<div class="col-5 reply">';
if ("{{dict.userid}}" == "{{session.get('userid')}}" ||
"{{session.get('role')}}" == "admin" ||
comment[i]['userid'] == "{{session.get('userid')}}") {
content += '<label οnclick="gotoReply(' + comment[i]['commentid'] + ')">';
content += '<i class="bi bi-chat-left-dots-fill"></i>';
content += '回复</label> ';
content += '<label οnclick="hideComment(this, ' + comment[i]['commentid'] + ')">隐藏</label>'; //
} else {
content += '<label οnclick="gotoReply(' + comment[i]['commentid'] + ')">';
content += '<i class="bi bi-chat-left-dots-fill"></i>回复</label> ';
content += '<label οnclick="agreeComment(this,' + comment[i]['commentid'] + ')">';
content += '<i class="bi bi-hand-thumbs-up-fill"></i>';
content += '赞成<span>' + comment[i]['agreecount'] + '</span>';
content += '</label>';
content += '<label οnclick="opposeComment(this, ' + comment[i]['commentid'] + ')">';
content += '<i class="bi bi-hand-thumbs-down-fill"></i>';
content += '反对<span>' + comment[i]['opposecount'] + '</span>';
content += '</label>';
}
content += '</div>';
content += '</div>';
content += '<div class="col-12 content">';
content += comment[i]['content'];
content += '</div>';
content += '</div>';
content += '</div>';
if (comment[i]['reply_list'].length > 0) {
var reply = comment[i]['reply_list'];
for (var j in reply) {
content += '<div class="col-12 list row">';
content += '<div class="col-2 icon">';
content += '<img src="/avatar/' + reply[j]['avatar'] + '" class="img-fluid" style="width: 35px;">';
content += '</div>';
content += '<div class="col-10 comment" style="border: solid 1px #ccc">';
content += '<div class="col-12 row" style="padding: 15px;">';
content += '<div class="col-7 commenter" style="color: #337AB7">' + reply[j]['nickname'] + ' ';
content += '回复 ' + comment[j]['nickname'] + ' ' + reply[j]['createtime'] + '</div>';
content += '<div class="col-sm-5 col-12 reply">';
if ("{{dict.userid}}" == "{{session.get('userid')}}" ||
"{{session.get('role')}}" == "admin" ||
comment[i]['userid'] == "{{session.get('userid')}}") {
content += '<label οnclick="hideComment(' + reply[j]['commentid'] + ')">';
content += '<i class="bi bi-chat-left-dots-fill"></i>';
content += '隐藏</label> ';
} else {
content += '<label οnclick="agreeComment(this, ' + reply[j]['commentid'] + ')">';
content += '<i class="bi bi-hand-thumbs-up-fill"></i>赞成<span>' + reply[j]['agreecount'] + '</span>';
content += '</label>';
content += '<label οnclick="opposeComment(this, ' + reply[j]['commentid'] + ')">';
content += '<i class="bi bi-hand-thumbs-down-fill"></i>反对<span>' + reply[j]['opposecount'] + '</span>';
content += '</label>';
}
content += '</div>';
content += '</div>';
content += '<div class="col-12">';
content += '回复内容' + reply[j]['content'];
content += '</div>';
content += '</div>';
content += '</div>';
}
}
}
$("#commentDiv").html(content);
});
}
注:此种分页也不完全是前后端分离的方式,其中{{ }}
双括号的内容实际上是后端传过来的值,如果想完全的前后端分离可以自己再修改下
方式二:
HTML页面:
<div id="commentDiv">
<!-- 方式一区别 -->
</div>
{% if total >1 %}
<div class="col-12 paginate">
<label onclick="gotoPage('{{dict.articleid}}','prev')">上一页</label>
{% for i in range(total) %}
<label onclick="gotoPage('{{dict.articleid}}','{{i+1}}')">{{i+1}}</label>
{% endfor %}
<label onclick="gotoPage('{{dict.articleid}}','next')">下一页</label>
</div>
{% endif %}
js代码:
var PAGE = 1;
var TOTAL = {{total}}
console.log("aaa" + TOTAL + PAGE)
function gotoPage(articleid, type) {
if (type == 'prev') {
if (PAGE > 1)
PAGE -= 1;
} else if (type == 'next') {
if (PAGE < TOTAL) {
PAGE += 1;
}
} else {
PAGE = parseInt(type);
}
fillComment(articleid, PAGE);
}
function fillComment(articleid, pageid) {
$("#commentDiv").empty();
var content = "";
$.get("/comment/" + articleid + "-" + pageid, function (data) {
var comment = data;
for (var i in comment) {
content += '<div class="col-12 list row">';
content += '<div class="col-2 icon">';
content += '<img src="/avatar/' + comment[i]['avatar'] + '" class="img-fluid" style="width: 70px;">';
content += '</div>';
content += '<div class="col-10 comment">';
content += '<div class="col-12 row" style="padding: 0px;">';
content += '<div class="col-7 commenter">';
content += comment[i]['nickname'];
content += ' ' + comment[i]['createtime'];
content += '</div>';
content += '<div class="col-5 reply">';
if ("{{dict.userid}}" == "{{session.get('userid')}}" ||
"{{session.get('role')}}" == "admin" ||
comment[i]['userid'] == "{{session.get('userid')}}") {
content += '<label οnclick="gotoReply(' + comment[i]['commentid'] + ')">';
content += '<i class="bi bi-chat-left-dots-fill"></i>';
content += '回复</label> ';
content += '<label οnclick="hideComment(this, ' + comment[i]['commentid'] + ')">隐藏</label>'; //
} else {
content += '<label οnclick="gotoReply(' + comment[i]['commentid'] + ')">';
content += '<i class="bi bi-chat-left-dots-fill"></i>回复</label> ';
content += '<label οnclick="agreeComment(this,' + comment[i]['commentid'] + ')">';
content += '<i class="bi bi-hand-thumbs-up-fill"></i>';
content += '赞成<span>' + comment[i]['agreecount'] + '</span>';
content += '</label>';
content += '<label οnclick="opposeComment(this, ' + comment[i]['commentid'] + ')">';
content += '<i class="bi bi-hand-thumbs-down-fill"></i>';
content += '反对<span>' + comment[i]['opposecount'] + '</span>';
content += '</label>';
}
content += '</div>';
content += '</div>';
content += '<div class="col-12 content">';
content += comment[i]['content'];
content += '</div>';
content += '</div>';
content += '</div>';
if (comment[i]['reply_list'].length > 0) {
var reply = comment[i]['reply_list'];
for (var j in reply) {
content += '<div class="col-12 list row">';
content += '<div class="col-2 icon">';
content += '<img src="/avatar/' + reply[j]['avatar'] + '" class="img-fluid" style="width: 35px;">';
content += '</div>';
content += '<div class="col-10 comment" style="border: solid 1px #ccc">';
content += '<div class="col-12 row" style="padding: 15px;">';
content += '<div class="col-7 commenter" style="color: #337AB7">' + reply[j]['nickname'] + ' ';
content += '回复 ' + comment[j]['nickname'] + ' ' + reply[j]['createtime'] + '</div>';
content += '<div class="col-sm-5 col-12 reply">';
if ("{{dict.userid}}" == "{{session.get('userid')}}" ||
"{{session.get('role')}}" == "admin" ||
comment[i]['userid'] == "{{session.get('userid')}}") {
content += '<label οnclick="hideComment(' + reply[j]['commentid'] + ')">';
content += '<i class="bi bi-chat-left-dots-fill"></i>';
content += '隐藏</label> ';
} else {
content += '<label οnclick="agreeComment(this, ' + reply[j]['commentid'] + ')">';
content += '<i class="bi bi-hand-thumbs-up-fill"></i>赞成<span>' + reply[j]['agreecount'] + '</span>';
content += '</label>';
content += '<label οnclick="opposeComment(this, ' + reply[j]['commentid'] + ')">';
content += '<i class="bi bi-hand-thumbs-down-fill"></i>反对<span>' + reply[j]['opposecount'] + '</span>';
content += '</label>';
}
content += '</div>';
content += '</div>';
content += '<div class="col-12">';
content += '回复内容' + reply[j]['content'];
content += '</div>';
content += '</div>';
content += '</div>';
}
}
}
$("#commentDiv").html(content);
});
}
<!-- 这步不能少,与方式一的最大区别 -->
window.onload = function () {
fillComment('{{dict.articleid}}',"1")
}