您的位置:首页 > 编程学习 > > 正文

node.js express 上线(node+express实现分页效果)

更多 时间:2021-10-19 06:39:12 类别:编程学习 浏览量:792

node.js express 上线

node+express实现分页效果

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

效果如下

node.js 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">
                        <li 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">&#xe642;</i>编辑
                        </button>
                        <button  class="btn btn-danger btn-xs dw-delete delate"  >
                            <i class="layui-icon">&#xe640;</i>删除
                         </button>
                      </li>
                     </td>
                    </tr>
                    <tr>
                    <% }) %> 
                          
                 </tbody>
     
        <!-- 分页处理 -->
                  <li class="am-cf">
                    <li class="am-active" style="margin-top: 20px">
                         <span style="font-size:20px">第 <%-pagenum%> 页</span>
                    </li>
                   
                   <li 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>
           </li>
    </li>>
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:node express 分页
    您可能感兴趣