js实现分页

已于 2022-04-08 10:34:09 修改
阅读量3.9k 收藏 3
点赞数 1
分类专栏： 前端 文章标签： ajax javascript
于 2022-04-08 10:32:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w5206666/article/details/124034662
版权

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}}&nbsp;&nbsp;&nbsp;{{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>&nbsp;&nbsp;&nbsp;
                        <label onclick="hideComment(this, '87')">隐藏</label>

                        {% else %}

                        <label onclick="gotoReply('{{comment.commentid}}')">
                            <i class="bi bi-chat-left-dots-fill"></i>回复
                        </label>&nbsp;&nbsp;&nbsp;
                        <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}}&nbsp;&nbsp;&nbsp;回复&nbsp;&nbsp;&nbsp;{{comment.nickname}}&nbsp;&nbsp;&nbsp;{{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>&nbsp;&nbsp;
    {% for i in range(total) %}
    <label onclick="gotoPage('{{dict.articleid}}','{{i+1}}')">{{i+1}}</label>&nbsp;&nbsp;
    {% endfor %}
    <label onclick="gotoPage('{{dict.articleid}}','next')">下一页</label>&nbsp;&nbsp;
</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 += '&nbsp;&nbsp;&nbsp;' + 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>&nbsp;&nbsp;&nbsp;';
               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>&nbsp;&nbsp;&nbsp;';
               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'] + '&nbsp;&nbsp;&nbsp;';
                   content += '回复&nbsp;&nbsp;&nbsp;' + comment[j]['nickname'] + '&nbsp;&nbsp;&nbsp;' + 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>&nbsp;&nbsp;&nbsp;';
                   } 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>&nbsp;&nbsp;
      {% for i in range(total) %}
      <label onclick="gotoPage('{{dict.articleid}}','{{i+1}}')">{{i+1}}</label>&nbsp;&nbsp;
      {% endfor %}
      <label onclick="gotoPage('{{dict.articleid}}','next')">下一页</label>&nbsp;&nbsp;
  </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 += '&nbsp;&nbsp;&nbsp;' + 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>&nbsp;&nbsp;&nbsp;';
                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>&nbsp;&nbsp;&nbsp;';
                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'] + '&nbsp;&nbsp;&nbsp;';
                    content += '回复&nbsp;&nbsp;&nbsp;' + comment[j]['nickname'] + '&nbsp;&nbsp;&nbsp;' + 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>&nbsp;&nbsp;&nbsp;';
                    } 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")
    }
Potato-OvO
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现分页功能
hexadecimal_001的博客
05-11 368
【代码】JS实现分页功能。
基于js分页实现（简单）
01-10
使用javacript实现分页技术，简单明了。没有多以的步骤！
如何用JavaScript实现数组分页？
最新发布
前端达人
08-05 253
Hello，大家好！今天要和大家分享一个非常实用的小技巧——如何在业务场景中使用JavaScript对数组进行分页展示。无论你是前端萌新，还是正在努力提升自己技能的小伙伴，这篇文章都会对你有所帮助哦！业务需求想象一下，我们正在开发一个购物网站，需要展示大量的商品数据。如果一下子展示太多，用户体验肯定不好。这时候分页展示就显得尤为重要了！如何用JavaScript实现这一需求呢？别急，我们一步步来。...
JS 分页实现
mk363255751的专栏
12-21 99
JS 分页实现 var pagesize = 5; var pageindex = 1; var pagetype; var parms; var nextSize = 1; var target; function AjaxGetData(_pagesize, _pageindex, _type, _parms, _target) {...
纯js分页-用js实现分页显示
01-05
纯js分页,用js将内容以分页的形式展现出来，处理数据更简单
【js 分页】js 分页 方法一 【实用】
刘贵庆的博客
08-19 7969
纯js 分页功能。
利用js制作html table分页示例(js实现分页)
10-26
描述和标签提到的“js实现分页”和“table分页”指的是用JavaScript编写代码来控制表格数据的分页显示。实现分页的步骤一般包括设置每页显示的数据条数、获取数据总条数、计算总页数、控制当前页数变量以及能够实现...
JS 实现分页打印功能
01-19
在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。 在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的...
JS实现分页效果代码.zip
07-04
本资源“JS实现分页效果代码.zip”提供了一种用JavaScript实现分页功能的解决方案，特别适用于动态加载数据或者需要优化用户浏览体验的场合。以下是对这个压缩包中包含的两个文件及其相关知识点的详细解释。 1. **...
JS实现分页导航效果
11-21
通过JS自己简单实现了效果。下面和大家分享一下。 内容 下图为首次加载后的效果，默认显示5页， 当点击下一页时将选中页面的页码置于中间 下面让我们来看看实现的代码 第一部分是在页面显示内容的处理 function ...
js实现的分页
09-27
js实现的漂亮的分页
使用js来实现分页功能
CQXXTXX的博客
10-24 3543
使用js实现分页功能
JS分页
南无阿弥豆腐的博客
07-29 551
//当前页数 var currentPage; //首页点击事件 $("#homePage").click(function() { if(currentPage!=1){ goPage(1); currentPage=1; } }); //尾页点击事件 $("#endPage").click(function() { if(curre...
JQuery AJAX 分页，跳页下一页，上一页【总结了一天啊干货】
热门推荐
九天工作室
10-09 1万+
网上的分页基本有问题，自己总结下：代码如下 var pagesi = "2";//每页行数 var totalPage = "0";//总页数 var currentPage = "1";//当前页 $(function(){ $('.menu_item').click(function () { $('.menu_
js实现分页功能
乔路非
01-29 6514
分页功能： 上一页(判断是否是首页) 下一页(判断是否是尾页) 改变页容量(判断是否>0) 改变当前页码(判断是否存在页码) 去往首页 去往尾页 参数： 页容量、当前页码、总数、所有页码 class Pagination{ constructor(total, pageSize = 10,currentPage = 1) { this.pageSize = pageSize > 0 ? pageSize : 10 // 页容量 this.curr.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值