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"></i>Edit</button> <button class="btn btn-danger btn-xs dw-delete delate" > <i class="layui-icon"></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:
|
<<: Detailed process of upgrading glibc dynamic library in centos 6.9
>>: Detailed explanation of nginx front-end distribution method based on $remote_addr
The error is as follows: Uncaught TypeError: Cann...
Install ssh tool 1. Open the terminal and type th...
The requirement is to pass in the rating data for...
Meta tag function The META tag is a key tag in th...
This article shares the installation and configur...
My original intention was to encapsulate the $not...
Mininet Mininet is a lightweight software defined...
Install GeoIP on Linux yum install nginx-module-g...
If you want to install multiple tomcats, you must...
The css animation of the rotating flip effect, th...
Preface Different script execution methods will r...
Table of contents 1. Vue initialization vue entry...
This article shares the specific code of JQuery t...
Table of contents 1. What is a subquery? 2. Self-...
I encountered a pitfall when writing dynamic form...