最近在用NodeJs做后台管理系统时,分页功能真是浪费了我不少时间啊!第一次写,在网上查阅了一番,发现介绍都不是很详细,也不是我想要的结果!理清了思路之后,终于完成了我想要的分页样式!上效果图!
首先看我的ejs分页代码
<div class="mainPaging">
<ul>
<li class="pagingLi"><a href="/admin/user?page=1">首页</a></li>
<li class="pagingLi"><a href="/admin/user?page=<%=page-1<1?1:page-1%>">上一页</a></li>
<% if(page>1){%>
<li class="pagingLi" ><a href="/admin/user?page=<%=page-1%>"><%=page-1%></a></li>
<%} %>
<li class="pagingLi" style="background:skyblue;"><a href="/admin/user?page=<%=page%>"><%=page%></a></li>
<%if(page<pages){%>
<li class="pagingLi"><a href="/admin/user?page=<%=page+1%>"><%=page+1%></a></li>
<%}%>
<li class="pagingLi"><a href="/admin/user?page=<%=page+1>pages?pages:page+1%>">下一页</a></li>
<li class="pagingLi"><a href="/admin/user?page=<%=pages%>">尾页</a></li>
</ul>
</div>
css样式
/*分页*/
.mainPaging{
width: 400px;
text-align: center;
overflow: hidden;
margin: 0 auto;
}
.mainPaging ul{
margin: 0;
padding: 0;
}
.pagingLi{
width: 55px;
height: 30px;
line-height: 30px;
list-style: none;
float: left;
cursor: pointer;
border: 1px solid #e7eaec;
margin-bottom: 10px;
}
.pagingLi a{
text-decoration: none;
}
下面让我们重点介绍一下NodeJs的代码!
下面是我们的路由!
router.get("/",function (req,res,next) {
DB.find("adminuser",{},function (err,data) {
var page=Number(req.query.page)||1 //当前页,前端用户通过get传递过来的页数,或没有传递时默认当前页数为1;
var limit=2//每页显示的条数;
//获取总条数;
const count=data.length;
//计算总页数;
var pages=Math.ceil(count/limit)
//当前页不能大于总页数;
page=Math.min(page,pages)
//当前页不能小于1
page=Math.max(page,1);
var skip=(page-1)*limit;//忽略数
DB.count("adminuser",{},limit,skip,function(error,data){
res.render('admin/user/user',{
list:data,//把查找到的数据以数组的形式返回到页面
page:page,//当前页
pages:pages,//总页数
})
})
})
});
注意: DB是我封装的对数据库的操作方法,find()则是我封装的一个查找数据的方法。count()是我封装的限制显示数据的方法,即以分页的形式显示。
下面看具体代码!
const MongoClient=require("mongodb").MongoClient;
const DbUrl='你的数据库地址';
const dbName = '你要连接的数据库表';
//连接数据库的封装方法
function connectDb(callback) {
MongoClient.connect(DbUrl,function (err,client) {
if(err){
console.log(err);
return;
}
const db = client.db(dbName);
callback(db);
client.close();
})
}
// 查询数据
exports.find=function (collectionname,json,callback) {
connectDb(function (db) {
const result=db.collection(collectionname).find(json);
result.toArray(function (error,data) {
callback(error,data);
})
});
};
// 分页查找数据
exports.count=function (collectionname,json,limit,skip,callback) {
connectDb(function (db) {
const result=db.collection(collectionname).find(json).limit(limit).skip(skip)
result.toArray(function (error,data) {
callback(error,data);
})
});
};
以上就是我的见解,与大家共享!