分页的实现简化后就是后台获取数据再传给前台,跳转页面时根据前台传给后台的页面数据,后台在查询相关的数据并处理好传给前台。这里实现的方法都大同小异,思想都是一样的,大都是数据的处理方法不同而已。这里只写了一种易于理解的方法二。方法一更加的清晰,留给你们了。
方法一、
查询之后是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> 
<div class="cp_item">
<span id="curr-page"><%=pagesData.pageNum%></span>
<span>/</span>
<span id="total-page"><%=pagesData.pages%></span>
</div> 
<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
});
})
})