node+express實現(xiàn)分頁效果
更新時間:2021年06月29日 17:31:59 作者:QQ帝國
這篇文章主要為大家詳細介紹了node+express實現(xiàn)分頁效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了node+express實現(xiàn)分頁效果展示的具體代碼,供大家參考,具體內容如下
效果如下

1、 index.js
在index.js
//數(shù)據(jù)列表傳前臺+分頁的實現(xiàn)
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;//數(shù)據(jù)條數(shù)
//page = page<1? 1:page;
page = Math.ceil(count/size);//總共的頁數(shù)
pagenum = pagenum<1?1:pagenum;//頁碼小于1;顯示1
pagenum = pagenum>page?page:pagenum;//頁碼大于總頁數(shù);顯示總頁數(shù)
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、所渲染的頁面
<!-- 從數(shù)據(jù)庫獲取的數(shù)據(jù)展示 -->
<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>>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Dapr+NestJs編寫Pub及Sub裝飾器實戰(zhàn)示例
這篇文章主要為大家介紹了Dapr+NestJs編寫Pub及Sub裝飾器的實戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08
Nodejs讀取本地json文件,輸出json數(shù)據(jù)接口方式
這篇文章主要介紹了Nodejs讀取本地json文件,輸出json數(shù)據(jù)接口方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
Webpack 實現(xiàn) Node.js 代碼熱替換
Webpack有一個很實用的功能叫做熱替換(Hot-replace),尤其是結合React Hot Loader插件,開發(fā)過程中都不需要刷新瀏覽器,任何前端代碼的更改都會實時的在瀏覽器中表現(xiàn)出來。2015-10-10

