node+express实现分页效果

本文实例为大家分享了node+express实现分页效果展示的具体代码,供大家参考,具体内容如下

效果如下

1、 index.js

在index.js 

//数据列表传前台+分页的实现

router.get('/admin', function(req, res, next) {

var count = 0;

var page = 0;

var size = 5;

//页码

var pagenum = req.query.pagenum;

var pagenum = pagenum?pagenum:1;

mongo.connect(url1,function(err,database){

database.collection("list",function(err,coll){

//异步处理

async.series([

function(callback){

coll.find({}).toArray(function(err,data){

count = data.length;//数据条数

//page = page<1? 1:page;

page = Math.ceil(count/size);//总共的页数

pagenum = pagenum<1?1:pagenum;//页码小于1;显示1

pagenum = pagenum>page?page:pagenum;//页码大于总页数;显示总页数

callback(null,'')

})

},function(callback){

coll.find().sort({_id:-1}).limit(size).skip((pagenum-1)*size).toArray(function(err,data){

callback(null,data)

})

}

],function(err,data){

res.render('admin',{list:data[1],page:page,count:count,pagenum:pagenum,size:size,name:req.session.name})

database.close()

})

// coll.find({}).toArray(function(err,data){

// res.render('admin', {list:data});//前端admin页面可用直接list

// database.close()

// })

})

})

});

2、所渲染的页面

<!-- 从数据库获取的数据展示 -->

<tbody id="tbody">

<% list.map(function(item,i){ %>

<tr>

<td><%- i+1 %></td>

<td><%- item.name %></td>

<td><%- item.nicheng %></td>

<td><%- item.time %></td>

<td><%- item.pass %></td>

<td class="text-center">

<div class="layui-btn-group">

<button class="btn btn-primary btn-xs change" data-toggle="modal" data-target="#myModal2" dw-url="create.html?id=1" dw-title="编辑用户">

<i class="layui-icon"></i>编辑

</button>

<button class="btn btn-danger btn-xs dw-delete delate" >

<i class="layui-icon"></i>删除

</button>

</div>

</td>

</tr>

<tr>

<% }) %>

</tbody>

<!-- 分页处理 -->

<div class="am-cf">

<li class="am-active" style="margin-top: 20px">

<span style="font-size:20px">第 <%-pagenum%> 页</span>

</li>

<div aria-label="Page navigation" style="margin-left:600px">

<ul class="pagination">

<li class="am-disabled">

<a href="/admin?pagenum=<%-pagenum<1?1:parseInt(pagenum)-1 %>" >«</a>

</li>

<% if(page>5){%>

<li class="am-active">

<a href="/admin?pagenum=1">1</a>

</li>

<li class="am-active">

<a href="/admin?pagenum=2">2</a>

</li>

<li class="am-active">

<a href="#" >...</a>

</li>

<li class="am-active">

<a href="/admin?pagenum=<%-page-1 %>"><%-page-1 %></a>

</li>

<li class="am-active">

<a href="/admin?pagenum=<%-page %>"><%-page %></a>

</li>

<% }else{%>

<% for(let i = 0;i<page;i++){ %>

<li class="am-active">

<a href="/admin?pagenum=<%-i+1 %>"><%-i+1 %></a>

</li>

<% } %>

<% } %>

<li>

<a href="/admin?pagenum=<%-pagenum>page?page:parseInt(pagenum)+1%>" >»</a>

</li>

</ul>

</div>

</div>>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 node+express实现分页效果 的全部内容, 来源链接: utcz.com/p/220903.html

回到顶部