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
Use HTML to write a dynamic web clock. The code i...
What is a file system We know that storage engine...
We usually use float layout to solve the compatib...
Table of contents 1. Overview of the page 2. Infi...
Table of contents mapState mapGetters mapMutation...
I have been studying the source code of Vue recen...
Preface This article mainly introduces 4 methods ...
Table of contents PXE implements unattended batch...
Docker image download is stuck or too slow I sear...
CSS is the realm of style, layout, and presentati...
Table of contents 1. The difference between trans...
Learning Linux commands is the biggest obstacle f...
GUN Screen: Official website: http://www.gnu.org/...
<br />In HTML language, you can automaticall...
Table of contents 1. Common function classificati...