我的编程空间,编程开发者的网络收藏夹
学习永远不晚

node+express实现分页效果

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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>>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

node+express实现分页效果

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

mybatis分页效果实现代码

本文为大家分享了mybatis分页效果展示的具体代码,供大家参考,具体内容如下mybatis版本3.4以下结构:spring-mvc.xml
2023-05-31

Android实现简单的分页效果

本文实例为大家分享了Android分页效果的具体代码,供大家参考,具体内容如下 1.实现分页最主要的就是封装分页代码,然后在按钮里实现相关的操作/*** 分页工具* * @Project App_Page* @Package com.and
2022-06-06

如何使用Mybatis实现分页效果

这篇文章主要介绍如何使用Mybatis实现分页效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、创建分页的工具类PageUti,存储分页所需要的五个数据:pageIndex(当前页码),pageSize(每页记录
2023-06-21

ASP.NET MVC中怎么实现分页效果

ASP.NET MVC中怎么实现分页效果,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。分页代码:PagerHelper.cs--> 1 using Syste
2023-06-17

编程热搜

目录