node+express实现分页效果

 更新时间:2021年06月29日 17:31:59   作者:QQ帝国  
这篇文章主要为大家详细介绍了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">&#xe642;</i>编辑
                    </button>
                    <button  class="btn btn-danger btn-xs dw-delete delate"  >
                        <i class="layui-icon">&#xe640;</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装饰器实战示例

    Dapr+NestJs编写Pub及Sub装饰器实战示例

    这篇文章主要为大家介绍了Dapr+NestJs编写Pub及Sub装饰器的实战示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 在Node.js中处理Promise中错误的示例代码

    在Node.js中处理Promise中错误的示例代码

    在现代JavaScript开发中,尤其在Node.js环境中,Promise已成为处理异步操作的重要方式,然而,Promise的错误处理却常常让开发者感到困惑,在这篇文章中,我们将深入探讨如何在Node.js中处理Promise中的错误,提供多个示例代码,以便于理解和实践,需要的朋友可以参考下
    2024-09-09
  • Nodejs读取本地json文件,输出json数据接口方式

    Nodejs读取本地json文件,输出json数据接口方式

    这篇文章主要介绍了Nodejs读取本地json文件,输出json数据接口方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 如何使用 Node.js 实现一个上传图片接口

    如何使用 Node.js 实现一个上传图片接口

    本文介绍了如何使用Node.js和Express框架创建一个简单的上传图片接口,首先,通过npm初始化项目并安装必要的依赖,如express和multer,然后,在index.js文件中编写上传图片的逻辑,并通过Postman测试接口,感兴趣的朋友跟随小编一起看看吧
    2025-02-02
  • Node.js实现解析post请求的方法详解

    Node.js实现解析post请求的方法详解

    这篇文章主要为大家详细介绍了Node.js实现解析post请求方法的相关知识,文中的示例代码讲解详细,具有一定的学习价值,有需要的小伙伴可以了解下
    2024-04-04
  • 详解nodejs 文本操作模块-fs模块(四)

    详解nodejs 文本操作模块-fs模块(四)

    本篇文章详细的讲诉fa.fstat方法,这个State对象中,包含的数据都有哪些,并且他们分别代表的含义是什么。具有一定的参考价值,有兴趣的可以了解一下。
    2016-12-12
  • Webpack 实现 Node.js 代码热替换

    Webpack 实现 Node.js 代码热替换

    Webpack有一个很实用的功能叫做热替换(Hot-replace),尤其是结合React Hot Loader插件,开发过程中都不需要刷新浏览器,任何前端代码的更改都会实时的在浏览器中表现出来。
    2015-10-10
  • nodejs中的express-jwt的使用解读

    nodejs中的express-jwt的使用解读

    这篇文章主要介绍了nodejs中的express-jwt的使用解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 深入解析Nodejs中的大文件读写

    深入解析Nodejs中的大文件读写

    这篇文章主要介绍了深入解析Nodejs中的大文件读写,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • node脚本实现自动化签到和抽奖功能

    node脚本实现自动化签到和抽奖功能

    本文主要介绍了node脚本实现自动化签到和抽奖功能,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01

最新评论