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%20%>" rel="external nofollow" >«</a> </li> <% if(page>5){%> <li class="am-active"> <a href="/admin?pagenum=1" rel="external nofollow" >1</a> </li> <li class="am-active"> <a href="/admin?pagenum=2" rel="external nofollow" >2</a> </li> <li class="am-active"> <a href="#" rel="external nofollow" >...</a> </li> <li class="am-active"> <a href="/admin?pagenum=<%-page-1%20%>" rel="external nofollow" ><%-page-1 %></a> </li> <li class="am-active"> <a href="/admin?pagenum=<%-page%20%>" rel="external nofollow" ><%-page %></a> </li> <% }else{%> <% for(let i = 0;i<page;i++){ %> <li class="am-active"> <a href="/admin?pagenum=<%-i+1%20%>" rel="external nofollow" ><%-i+1 %></a> </li> <% } %> <% } %> <li> <a href="/admin?pagenum=<%-pagenum>page?page:parseInt(pagenum)+1%>" rel="external nofollow" >»</a> </li> </ul> </div> </div>>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 微信小程序虛擬列表的實現示例
- vue實現一個簡單的分頁功能實例詳解
- Spring Boot和Thymeleaf整合結合JPA實現分頁效果(實例代碼)
- 基於javascript實現移動端輪播圖效果
- Flask快速實現分頁效果示例