博客项目——分页功能实现

服务器路由代码(userPage.js)

将page(客户端以get方式传递的当前页数)和total(服务器从数据库获取并计算出的总页数)数据引入模板

//引入用户模板
const { User } = require('../../model/user');
module.exports = async (req, res) => {
     //获取用户当前页数page ,用户未窜入page默认显示第一页数据
    let page = req.query.page || 1;
    // //给页面指定页数
    let pagesize = 10;
    let count = await User.countDocuments({});
    //total存放用户总页数
    let total = Math.ceil(count / pagesize); 
    // res.render('admin/user', { mes: req.username });
    //查找所有用户信息,limit限制显示10个,skip表示跳过start从start+1开始展示
    let start = (page - 1) * 10;
    let users = await User.find({}).limit(10).skip(start);
    //将用户信息渲染到模板里
    res.render('admin/user', {
        users: users,
        //通过从客户顿发送的page参数以及服务器计算的total来渲染模板
        page: page,
        total:total
    });
    
}

用户展示模板核心代码(user.art)

        <!-- 分页 -->
        <ul class="pagination">
            <!-- 当前页面-1是否<1,小于则说明当前是第一页,不显示<< -->
            <li style="display: <%= page-1<1 ? 'none': 'inline' %>">
                <a href="/admin/user?page=<%=page-1%>">
                    <span>&laquo;</span>
                </a>
            </li>
            <!-- 利用循环生成页面链接,不同的链接通向统一页面的不同参数 =号含义是输出-->
            <%for(var i=1;i<=total;i++) {%>
            <li><a href="/admin/user?page=<%=i%>"><%=i%></a></li>
            <% }%>
             <!-- 当前页面+1是否>total(最后一页),大于则说明当前是最后一页,不显示>> -->
            <li style="display: <%= page-0+1>total ? 'none': 'inline' %>">
                <a href="/admin/user?page=<%=page-0+1%>">
                    <span>&raquo;</span>
                </a>
            </li>
        </ul>
        <!-- /分页 -->

注意

 <!-- 当前页面+1是否>total(最后一页),大于则说明当前是最后一页,不显示>> -->
            <li style="display: <%= page-0+1>total ? 'none': 'inline' %>">
                <a href="/admin/user?page=<%=page-0+1%>">
                    <span>&raquo;</span>
                </a>
            </li>

用原始语法循环生成页码,<%=i%>当需要有输出的时候不要忘了等号。第一个page是参数,第二个page是变量。注意减号有隐式类型转化,加号没有会显示11,采用-0的方式解决

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值