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
1. Introduction to Varnish Varnish is a high-perf...
If you think the system is slow and want to chang...
In the vertical direction, you can set the alignm...
Vue - implement the shuttle box function, the eff...
I just joined a new company recently. After getti...
Install linux7.2 Internet access configuration on...
Table of contents Preface Summary of audio and vi...
1.1 Introduction to iptables firewall Netfilter/I...
1. Two ways to specify the character set of the h...
1. Introduction The topic of whether to use forei...
Scenario simulation: Some domestic companies need...
Table of contents 1. substring() 2. substr() 3.in...
1. Location regular expression Let's take a l...
Function: Jump to the previous page or the next p...
1. Why create an index? (Advantages) This is beca...