在服务端实现分页功能的项目中,如何实现分页中的上一页和下一页的启用和禁用,在自己的实践中,经历痛苦的摸索.网上也没有找到有关的针对性文章, 经过反复琢磨, 最终成功达成效果; 分享给初学者和同道.也为自己做个记录.

应用场景: node项目,后端操作数据库,实现分页功能 (服务端分页控制),并设置分页中的 "上一页" 和 "下一页" 的启用和禁用功能

一. 后端处理数据库,查寻数据, 实现分页,(服务端分页控制)

二.后端传递数据,在前端通过模板 art-template 实现分页,

三.如何处理分页中的上一页和下一页的启用和禁用?

1, 当前页处于第1页时, 需要上一页的按键被禁用, 当处于其它页时,恢复上一页的使用功能

2. 当前页处于最后一个页码时, 下一页的按键应该被禁用, 当处于其它页时, 下一页的功能恢复使用

四. 代码逻辑实现:

1. 后端处理

// 后端路由
Router.get("/poem", (req, res, next) => {

    // 定义当前页,这个当前页就是客户端点出时发送过来的页码数,把它变成number类型的十进抽数值
    const page = Number.parseInt(req.query.page, 10);

    // 定义每页的显示数
    const pageSize = 5;

    // 操作数据库集合中的数据

   PoemsOne
        .find()
        .skip((page - 1) * pageSize)
        .limit(pageSize)
        .exec((err, poemsones) => {
            if (err) {
                return next(err);
            }
            PoemsOne.countDocuments((err, count) => {
                if (err) {
                    return next(err);
                }
                const totalPages = [];
                const totalPage = Math.ceil(count / pageSize);
                for (let i = 0; i < totalPage; i++) {
                    totalPages.push(i);
                }
                res.render("poem.html", {
                    poemsones,
                    totalPages,
                    page,
                });
            });
        });
});

2. 前端模板处理: (totalPages是后端传递过来的一个数值数组) bootstrap框架

<ul class="pagination">
        <!-- 对上一页添加逻辑判断,当前页小于等于1 时, 对这个键设置禁用状态;-->
        {{if page<=1}}
        <li class="disabled"><a href="javascript:;">上一页</a></li>
        {{else}}
        <!-- 当处在其它页码时,恢复启用上一页的功能-->
        <li><a href="/poem?page={{page-1}}">上一页</a></li>
        {{/if}}


        <!-- 根据数据库的数据进行分页循环遍历 -->
        {{each totalPages}}
              代码略...
        {{/each }}
        
        <--对下一页添加逻辑判断,当前页值 大于等于 现有的页数时, 下一页按键功能被禁用,>
        {{if page>=totalPages.length}}
        <li class="disabled"><a href="javascript:;">下一页</a></li>
        {{else}}

        <--当处在其它页码时,恢复启用下一页的功能>
        <li><a href="/poem?page={{page+1}}">下一页</a></li>
        {{/if}}
</ul>

通过以上,成功实现了简单的分页中上一页和下一页功能的启用和禁用.

技术简单, 大神和资深者可直接无视,如有错误,诚恳欢迎批评指正! 如对初学者稍有助益, 请点个好评

更多推荐