Node+Express zum Erzielen eines Paging-Effekts

Node+Express zum Erzielen eines Paging-Effekts

In diesem Artikel wird der spezifische Code von node+express zur Erzielung einer Paging-Effektanzeige zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Die Wirkung ist wie folgt

1. index.js

In index.js

//Datenlistenübertragung zum Frontend + Paging-Implementierung router.get('/admin', function(req, res, next) {
     Variablenanzahl = 0;
    var Seite = 0;
    Vargröße = 5;
    //Seitennummer var pagenum = req.query.pagenum;
    var Seitennummer = Seitennummer?Seitennummer:1;
  mongo.connect(url1,Funktion(err,Datenbank){
    Datenbank.Sammlung("Liste",Funktion(Fehler,Sammlung){ 
       //Asynchrone Verarbeitung async.series([
      Funktion(Rückruf){
       coll.find({}).toArray(Funktion(err,Daten){
        Anzahl = Datenlänge; //Anzahl der Datenelemente //Seite = Seite<1? 1:Seite;
        page = Math.ceil(Anzahl/Größe); //Gesamtzahl der Seiten pagenum = pagenum<1?1:pagenum; //Seitenzahl ist kleiner als 1; Anzeige 1
        pagenum = pagenum>page?page:pagenum; //Die Seitenzahl ist größer als die Gesamtseitenzahl; zeige die Gesamtseitenzahl an callback(null,'')
       })
       
      },Funktion(Rückruf){
       
       coll.find().sort({_id:-1}).limit(Größe).skip((Seitennummer-1)*Größe).toArray(Funktion(Fehler,Daten){
           Rückruf(null,Daten)
       })
      }
     ],Funktion(Fehler,Daten){
             res.render('admin', {Liste:Daten[1],Seite:Seite,Anzahl:Anzahl,Seitenzahl:Seitenzahl,Größe:Größe,Name:Anforderung.Sitzungsname})
             Datenbank.schließen()
      
     })
      // coll.find({}).toArray(Funktion(err,Daten){       
      // res.render('admin', {list:data}); //Front-End-Admin-Seite kann direkt verwendet werden Liste
      // Datenbank.schließen()
      // })
    })
  })
});

2. Gerenderte Seite

<!-- Anzeige der aus der Datenbank geholten Daten -->    
 
      <tbody-ID="tbody">
          <% Liste.Map(Funktion(Element,i){ %>
              <tr>
                <td><%- i+1 %></td>
                <td><%- Artikelname %></td>
                <td><%- Artikel.nicheng %></td>
                <td><%- Artikel.Zeit %></td>
                 <td><%- Artikel.Passwort %></td>
                 <td Klasse="text-center">
                    <div Klasse="layui-btn-Gruppe">
                    <button class="btn btn-primary btn-xs change" data-toggle="modal" data-target="#myModal2" dw-url="create.html?id=1" dw-title="Benutzer bearbeiten">
                    <i class="layui-icon">&#xe642;</i>Bearbeiten</button>
                    <button class="btn btn-danger btn-xs dw-delete löschen" >
                        <i class="layui-icon">&#xe640;</i>Löschen</button>
                  </div>
                 </td>
                </tr>
                <tr>
                <% }) %> 
                      
             </tbody>
 
    <!-- Paging-Verarbeitung -->
              <div Klasse="am-cf">
                <li Klasse="am-active" Stil="margin-top: 20px">
                     <span style="font-size:20px">Seite<%-pagenum%></span>
                </li>
               
               <div aria-label="Seitennavigation" style="margin-left:600px">
                 <ul Klasse="pagination">
                   <li Klasse="am-disabled">
                     <a href="/admin?pagenum=<%-pagenum<1?1:parseInt(pagenum)-1 %>" >«</a>
                   </li>
                 
                 <% if(Seite>5){%>
                     <li Klasse="am-active">
                     <a href="/admin?pagenum=1">1</a>
                   </li>
                   <li Klasse="am-active">
                     <a href="/admin?pagenum=2">2</a>
                   </li>
                   <li Klasse="am-active">
                     <a href="#" >...</a>
                   </li>
                   <li Klasse="am-active">
                     <a href="/admin?pagenum=<%-page-1 %>"><%-page-1 %></a>
                   </li>
                   <li Klasse="am-active">
                     <a href="/admin?pagenum=<%-page %>"><%-page %></a>
                   </li>
                   
                 
                 <% }sonst{%>
                 
                   <% für (let i = 0;i<page;i++){ %> 
                     <li Klasse="am-active">
                       
                       <a href="/admin?pagenum=<%-i+1 %>"><%-i+1 %></a>
                     </li>
                   <% } %> 
                 <% } %>
                 
                 
           <li>
           <a href="/admin?pagenum=<%-pagenum>Seite?page:parseInt(pagenum)+1%>" >»</a>
           </li>
           </ul>
       </div>
</div>>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • NodeJS und MySQL implementieren Paging-Daten und Reverse-Daten
  • Vue+Node implementiert die Paginierung, Sortierung und Filterung von Produktlisten und bietet eine detaillierte Erläuterung zum Hinzufügen von Warenkorbfunktionen.
  • NodeJs-Bedienung MongoDB-Tutorial Paging-Funktion und häufige Probleme
  • Zwei Möglichkeiten zum Implementieren der Paging-Funktion in einer Bootstrap-Tabelle in Node.js
  • Nodejs MySQL-Paging-Methode
  • Nodejs Persönlicher Blog Entwicklung Schritt 6 Daten Paging
  • Node.js-Suchpaging-Beispiel basierend auf MongoDB
  • Implementierungscode für NodeJS- und BootStrap-Paging-Effekte
  • Freigabe von Nodejs-Paging-Code

<<:  Detaillierter Prozess zum Aktualisieren der dynamischen Glibc-Bibliothek in CentOS 6.9

>>:  Detaillierte Erläuterung der Nginx-Frontend-Verteilungsmethode basierend auf $remote_addr

Artikel empfehlen

Einführung und Verwendungszusammenfassung der negativen Margenfunktion

Bereits in den CSS2-Empfehlungen von 1998 verschwa...

Beispielcode für horizontales Balkendiagramm von Echarts Bar

Inhaltsverzeichnis Horizontales Balkendiagramm Da...

Vue3 kapselt seine eigene Paging-Komponente

In diesem Artikelbeispiel wird der spezifische Co...

Lösen Sie das Problem des Startfehlers von PHPStudy MySQL unter Windows

Einen Fehler melden Der Apache\Nginx-Dienst wurde...

Beispiel für das Herunterladen von Dateien mit vue+django

Inhaltsverzeichnis 1. Übersicht 2. Django-Projekt...

Detailliertes Tutorial zur Springcloud-Alibaba-Nacos-Linux-Konfiguration

Laden Sie zuerst das komprimierte Nacos-Paket von...

mysql: [FEHLER] unbekannte Option '--skip-grant-tables'

MySQL-Datenbank meldet FEHLER 1045 (28000): Zugri...

Neue Funktionen in MySQL 8.0 - Einführung in Check Constraints

Inhaltsverzeichnis Vorwort Einschränkungen prüfen...

Detaillierte Erklärung zum Erstellen einer aktualisierbaren Ansicht in MySQL

Dieser Artikel beschreibt anhand eines Beispiels,...