Node+express+mongodb 分页

  
  分页的实现简化后就是后台获取数据再传给前台,跳转页面时根据前台传给后台的页面数据,后台在查询相关的数据并处理好传给前台。这里实现的方法都大同小异,思想都是一样的,大都是数据的处理方法不同而已。这里只写了一种易于理解的方法二。方法一更加的清晰,留给你们了。

方法一
查询之后是json数据,先跳转前 n 页,再获取数据。

dataBaseName //数据库名称
collectionName //集合名称
pageNum //跳转页面时当前页码
pageSize //页面显示数据数量
db.db(dataBaseName).collection(collectionName).find().skip(pageNum*pageSize).limit(pageSize).toArray();

  
渲染效果
在这里插入图片描述
ejs模板

<table class="userlist">
    <thead>
        <tr>
            <th>姓名</th>
            <th>班级</th>
            <th>方向</th>
            <th>届数</th>
            <th>QQ</th>
            <th>选项</th>
        </tr>
    </thead>
        <tbody>
        <% for(var i = 0;i < list.length;i++){ %>
        <tr>
            <td><%=list[i].learnName%></td>
            <td><%=list[i].learnClass%></td>
            <td><%=list[i].learnStudy%></td>
            <td><%=list[i].learnYear%></td>
            <td><%=list[i].learnQQ%></td>
            <td>
                <a href="./detail?id=<%=list[i]._id%>"><button class="detail opeBtn">详情</button></a>
                <a href="./edit?id=<%=list[i]._id%>"><button class="reSet opeBtn">修改</button></a>
                <a href="./delete?id=<%=list[i]._id%>"><button class="del opeBtn">删除</button></a>
            </td>
        </tr>
        <%}%>
        </tbody>
</table>
<div class="pages_box">
    <div class="cp_item">
        <span></span>
        <span id="cp-count"><%=pagesData.dataCount%></span>
        <span></span>
    </div>&emsp;
    <div class="cp_item">
        <span id="curr-page"><%=pagesData.pageNum%></span>
        <span>/</span>
        <span id="total-page"><%=pagesData.pages%></span>
    </div>&emsp;
    <div class="cp_item">
        <a href="./userList?pageNum=1"><button id="home">首页</button></a>
        <a href="./userList?pageNum=<%=pagesData.pageLose%>"><button id="prev">上页</button></a>
        <a href="./userList?pageNum=<%=pagesData.pageAdd%>"><button id="next">下页</button></a>
        <a href="./userList?pageNum=<%=pagesData.pages%>"><button id="last">尾页</button></a>
    </div>
</div>

后台处理方法

var pages; //分页总页数,设置全局变量,跳转页面时获取总页数
router.get('/userList',function (req,res) {
    let array = new Array(); //存储当前页数据的数组
    let pageDataSize = 10; //当前页数据量
    let pageNum = (req.query.pageNum ? req.query.pageNum : 1); //设置默认页数为第一页
    var pageLose = pageNum - 1; //上一页,
    var pageAdd = pageNum + 1; //下一页
    if(pageLose < 1){ //如果上一页小于1,跳转到第一页
        pageLose = pageNum;
    }else if(pageAdd > pages){ //如果下一页大于总页数,跳转到最后一页
        pageAdd = pageNum;
    }
    //这是新版mongogdb数据库
    var result = db.db(dataBaseName).collection(collectionName).find(json);
        result.toArray(function (error,data) {
            db.close();//关闭数据库
            let dataCount = data.length;// 数据总数
	        pages = Math.ceil(dataCount/pageDataSize);//最后一页数据不足时为一页
	        let num = (pageNum - 1) * pageDataSize;// 跳过数据数量
	        let forNum = (dataCount - num) >= 10 ? 10 : (dataCount - num);
	        // 把即将跳转的页面的数据存到一个数组里
	        for(let i = 0;i < forNum;i++){
	            array[i] = data[num + i];
	        }
	        // 分页按钮数据
	        let pagesData = {
	            dataCount:dataCount,
	            pages:pages,
	            pageNum:pageNum,
	            pageLose:pageLose,
	            pageAdd:pageAdd
	        }
	        res.render('admin/user/userList',{
	            list:array,
	            pagesData:pagesData
	        });
	   })
})

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值