返回顶部
首页 > 资讯 > 前端开发 > JavaScript >node+express实现分页效果
  • 817
分享到

node+express实现分页效果

2024-04-02 19:04:59 817人浏览 泡泡鱼
摘要

本文实例为大家分享了node+express实现分页效果展示的具体代码,供大家参考,具体内容如下 效果如下 1、 index.js 在index.js  //数据列表

本文实例为大家分享了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>>

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

--结束END--

本文标题: node+express实现分页效果

本文链接: https://lsjlt.com/news/129356.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • node+express实现分页效果
    本文实例为大家分享了node+express实现分页效果展示的具体代码,供大家参考,具体内容如下 效果如下 1、 index.js 在index.js  //数据列表...
    99+
    2024-04-02
  • React实现分页效果
    本文实例为大家分享了React实现分页效果的具体代码,供大家参考,具体内容如下 首先确保已经安装了antd,axios jsx文件: import React, { useSt...
    99+
    2024-04-02
  • vue+Element实现分页效果
    本文实例为大家分享了vue+Element实现分页效果的具体代码,供大家参考,具体内容如下 一般样式都是card里面包含列表和分页 这里就直接上代码了 <el-card&g...
    99+
    2024-04-02
  • jQuery实现Table分页效果
    本文实例为大家分享了jQuery实现Table分页效果的具体代码,供大家参考,具体内容如下 CSS: <style> .pager { fon...
    99+
    2024-04-02
  • vue+elementUI实现分页效果
    本文实例为大家分享了vue+elementUI实现分页效果的具体代码,供大家参考,具体内容如下 页面中渲染的数据不是所有数据,是需要展示的数据,即当前页的数据,默认第一页的数据,这里...
    99+
    2024-04-02
  • ajax如何实现分页效果
    这篇文章将为大家详细讲解有关ajax如何实现分页效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。ajax分页效果图:上干货:  $(function(){&n...
    99+
    2024-04-02
  • 如何实现layui分页效果
    这篇文章主要介绍了如何实现layui分页效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下<!DOCTYPE h...
    99+
    2024-04-02
  • 小程序实现分页效果
    本文实例为大家分享了小程序实现分页效果展示的具体代码,供大家参考,具体内容如下 <view class="pages_box"> <view bindta...
    99+
    2024-04-02
  • JS实现前端分页效果
    本文实例为大家分享了JS实现前端分页效果的具体代码,供大家参考,具体内容如下 一、HTML部分 <!doctype html> <html> <he...
    99+
    2024-04-02
  • vue项目实现分页效果
    vue项目中实现分页效果,供大家参考,具体内容如下 1.这里我们使用element-ui来实现,先使用npm安装 npm i element-ui -S 2.在main.js中...
    99+
    2024-04-02
  • 如何实现Ajax分页效果
    这篇文章给大家分享的是有关如何实现Ajax分页效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。首先创建前台页面MyAjaxPager.aspx 复制代码 代码如下:<%@...
    99+
    2024-04-02
  • mybatis分页效果实现代码
    本文为大家分享了mybatis分页效果展示的具体代码,供大家参考,具体内容如下mybatis版本3.4以下结构:spring-mvc.xml<?xml version="1.0" encoding="UTF-8"?&g...
    99+
    2023-05-31
    mybatis 分页 实现代码
  • SpringBoot+Mybatis分页插件PageHelper实现分页效果
    目录一、项目结构二、插件引入三、代码四、测试:        最近刚入职新公司,项目是从零开始搭建的项目。我觉得是时候考验是驴还是千里马的时候...
    99+
    2024-04-02
  • Android实现简单的分页效果
    本文实例为大家分享了Android分页效果的具体代码,供大家参考,具体内容如下 1.实现分页最主要的就是封装分页代码,然后在按钮里实现相关的操作 public class ...
    99+
    2022-06-06
    分页 Android
  • AJAX分页效果的实现方法
    这篇文章主要为大家展示了“AJAX分页效果的实现方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“AJAX分页效果的实现方法”这篇文章吧。最近写一个给用户组添加...
    99+
    2024-04-02
  • MVC使用MvcPager实现分页效果
    本文实例为大家分享了MVC使用MvcPager实现分页效果的具体代码,供大家参考,具体内容如下 一、数据库表 USE [StudentDB] GO   SET ANSI_NULLS...
    99+
    2024-04-02
  • css如何实现数字分页效果
    本篇内容介绍了“css如何实现数字分页效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!CSS如何实现数字...
    99+
    2024-04-02
  • jquery+Ajax实现简单分页条效果
    本文实例为大家分享了jquery+Ajax实现分页条效果的具体代码,供大家参考,具体内容如下 一、如果是jsp页面的话,可以用EL表达式和JSTL标签制作一个分页条,没有什么难度。用...
    99+
    2024-04-02
  • 原生JS实现酷炫分页效果
    本文实例为大家分享一个如下效果的JS分页特效,是不是很酷炫。  以下是代码实现: <!DOCTYPE html> <html> <h...
    99+
    2024-04-02
  • js对象实现数据分页效果
    本文实例为大家分享了js对象实现数据分页效果的具体代码,供大家参考,具体内容如下 实现数据分页要清楚这个的方面的设计: 1.先模拟建立一个后台数据库,如下: var peoson...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作