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

Write a dynamic clock on a web page in HTML

Use HTML to write a dynamic web clock. The code i...

Detailed explanation of MySQL file storage

What is a file system We know that storage engine...

How to use negative margin technology to achieve average layout in CSS

We usually use float layout to solve the compatib...

A brief discussion on the principle of shallow entry and deep exit of MySQL

Table of contents 1. Overview of the page 2. Infi...

Vue front-end development auxiliary function state management detailed example

Table of contents mapState mapGetters mapMutation...

Several ways to pass data from parent components to child components in Vue

I have been studying the source code of Vue recen...

Examples of 4 methods for inserting large amounts of data in MySQL

Preface This article mainly introduces 4 methods ...

Solution to Docker image downloading too slowly

Docker image download is stuck or too slow I sear...

Several techniques for playing sounds with CSS

CSS is the realm of style, layout, and presentati...

How to use Vue to implement CSS transitions and animations

Table of contents 1. The difference between trans...

A complete list of common Linux system commands for beginners

Learning Linux commands is the biggest obstacle f...

Detailed explanation of screen command usage in Linux

GUN Screen: Official website: http://www.gnu.org/...

HTML table markup tutorial (14): table header

<br />In HTML language, you can automaticall...

Common functions of MySQL basics

Table of contents 1. Common function classificati...