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。

推薦閱讀: