Node+express to achieve paging effect

Node+express to achieve paging effect

This article shares the specific code of node+express to achieve paging effect display for your reference. The specific content is as follows

The effect is as follows

1. index.js

In index.js

//Data list transmission to front-end + paging implementation router.get('/admin', function(req, res, next) {
     var count = 0;
    var page = 0;
    var size = 5;
    //Page number var pagenum = req.query.pagenum;
    var pagenum = pagenum?pagenum:1;
  mongo.connect(url1,function(err,database){
    database.collection("list",function(err,coll){ 
       //Asynchronous processing async.series([
      function(callback){
       coll.find({}).toArray(function(err,data){
        count = data.length; //Number of data items //page = page<1? 1:page;
        page = Math.ceil(count/size); //Total number of pages pagenum = pagenum<1?1:pagenum; //Page number is less than 1; display 1
        pagenum = pagenum>page?page:pagenum; //The page number is greater than the total number of pages; display the total number of pages 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}); //Front-end admin page can be used directly list
      // database.close()
      // })
    })
  })
});

2. Rendered page

<!-- Display of data obtained from the database -->    
 
      <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="Edit User">
                    <i class="layui-icon">&#xe642;</i>Edit</button>
                    <button class="btn btn-danger btn-xs dw-delete delate" >
                        <i class="layui-icon">&#xe640;</i>Delete</button>
                  </div>
                 </td>
                </tr>
                <tr>
                <% }) %> 
                      
             </tbody>
 
    <!-- Paging Processing -->
              <div class="am-cf">
                <li class="am-active" style="margin-top: 20px">
                     <span style="font-size:20px">Page<%-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>>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • NodeJS and MySQL implement paging data and reverse data
  • Vue+Node implements paging, sorting, and filtering of product lists, and detailed explanation of adding shopping cart functions
  • NodeJs operation MongoDB tutorial paging function and common problems
  • Two ways to implement paging in Bootstrap-table in Node.js
  • Nodejs mysql paging method
  • Nodejs personal blog development step 6 data paging
  • Node.js search paging example based on MongoDB
  • NodeJS and BootStrap paging effect implementation code
  • Nodejs paging code sharing

<<:  Detailed process of upgrading glibc dynamic library in centos 6.9

>>:  Detailed explanation of nginx front-end distribution method based on $remote_addr

Recommend

vue-electron problem solution when using serialport

The error is as follows: Uncaught TypeError: Cann...

How to install and configure SSH service in Ubuntu 18.04

Install ssh tool 1. Open the terminal and type th...

Implementation of React star rating component

The requirement is to pass in the rating data for...

Summary of the use of html meta tags (recommended)

Meta tag function The META tag is a key tag in th...

MySQL 8.0.15 winx64 installation and configuration method graphic tutorial

This article shares the installation and configur...

A brief discussion on the $notify points of element

My original intention was to encapsulate the $not...

Problems and solutions encountered when installing mininet on Ubuntu 16.04.4LTS

Mininet Mininet is a lightweight software defined...

How to read the regional information of IP using Nginx and GeoIP module

Install GeoIP on Linux yum install nginx-module-g...

Install three or more tomcats under Linux system (detailed steps)

If you want to install multiple tomcats, you must...

CSS to achieve the effect of rotating flip card animation

The css animation of the rotating flip effect, th...

A brief discussion on the whole process of Vue's first rendering

Table of contents 1. Vue initialization vue entry...

JQuery implements hiding and displaying animation effects

This article shares the specific code of JQuery t...

mysql subquery and join table details

Table of contents 1. What is a subquery? 2. Self-...

React antd realizes dynamic increase and decrease of form

I encountered a pitfall when writing dynamic form...