简介

在自己做的一个论坛案例中，实现让页面按数据量进行合理的同步刷新分页显示效果，这里需要了解数据分页显示的相关数学运算基础，没错，你需要先了解每一页的数据量以及某一页数据索引位置的数学运算，以及monoose API相关查询

步骤

  1. 首先在后台，对从数据库拿到的数据进行分析

    通过查阅mongoose API，可以通过以下方式将多条数据按需划分，例如，每页只需展示6条评论数据，则进行相关运算，那么第二页为12，展示的数据从7开始，12结束，第三页为18，展示的数据从13开始，18结束，然后就可以得出规律，每一页都是从(页数 - 1) * 展示数开始截取数据。然后咱们就可以通过以下代码实现了，最后就是获得当前页数，总页数以及所需展示的文章数和用户信息，再使用art-template进行前端页面渲染

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    router.get('/', function(req, res, next) {
        //实现分页
        const page = Number.parseInt(req.query.page, 10) //获取当前页页数
        const pageSize = 6 //定义每页显示的数据量
        Topic
            .find() //查询所有信息
            .skip((page - 1) * pageSize) //跳过前(page - 1) * pageSize条，直接从(page - 1) * pageSize + 1开始
            .limit(pageSize) //只截取pageSize条数据
            .exec((err, user) => {
                if (err) {
                    return next(err)
                }
                Topic.count((err, count) => {
                    if (err) {
                        return next(err)
                    }
                    const totalPage = Math.ceil(count / pageSize) // 总页码 = 总记录数 / 每页显示大小，向下取整
                    res.render('index.html', {
                        user: req.session.user, //用户登录状态信息
                        topic: user, //将评论渲染到页面
                        totalPage, //总页数
                        page, //当前页数
                    })
                })
            })
    })

  2. 前端页面代码，这里因为总是上不了art-template官网，所以只能从已有的笔记中使用art-template中each遍历的原始语法，通过遍历总页数，将每一页的a标签渲染出来，再进行语句判断，如果是当前页数，则进行样式改变，最后添加上一页下一页效果，完整代码如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!-- 分页 -->
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                {{if page !== 1}}
                <a href="/?page={{page - 1}}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
                {{else}}
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
                {{/if}}
            </li>
            <% for(var i = 0; i < totalPage; i++){ %>
            {{ if (i + 1) === page }}
            <li class="active"><a href="/?page={{ i + 1 }}">{{ i + 1 }}</a></li>
            {{ else }}
            <li><a href="/?page={{ i + 1 }}">{{ i + 1 }}</a></li>
            {{ /if }}
            <% } %>
            <li>
                {{if page === totalPage}}
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
                {{ else }}
                <a href="/?page={{page + 1}}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
                {{/if}}
            </li>
        </ul>
    </nav>

    显示效果

    image-20200728170822970