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

CentOS 7.5 deploys Varnish cache server function

1. Introduction to Varnish Varnish is a high-perf...

Centos 7 64-bit desktop version installation graphic tutorial

If you think the system is slow and want to chang...

HTML table markup tutorial (43): VALIGN attribute of the table header

In the vertical direction, you can set the alignm...

Vue's detailed code for implementing the shuttle box function

Vue - implement the shuttle box function, the eff...

Steps for packaging and configuring SVG components in Vue projects

I just joined a new company recently. After getti...

Basic ideas and codes for implementing video players in browsers

Table of contents Preface Summary of audio and vi...

Linux firewall iptables detailed introduction, configuration method and case

1.1 Introduction to iptables firewall Netfilter/I...

Two ways to specify the character set of the html page

1. Two ways to specify the character set of the h...

Interaction in web design: A brief discussion on paging issues

Function: Jump to the previous page or the next p...