Paginierungsfunktion | Front-End-Webentwicklung | Kursübersicht

Einführung

In diesem Projekt lernen Sie, wie Sie die Paginierungsfunktion für eine Kursliste implementieren. Paginierung ist ein wesentliches Merkmal in der Front-End-Webentwicklung, und dieses Projekt führt Sie durch den Prozess des Abrufens von Daten aus einer JSON-Datei, des Anzeigens der Daten in paginierter Form und der Handhabung der Funktionen für die vorherige und nächste Seite.

👀 Vorschau

Paginierungsfunktionsdemo

🎯 Aufgaben

In diesem Projekt lernen Sie:

Wie Sie Daten aus einer JSON-Datei mit der Axios-Bibliothek abrufen
Wie Sie die Kursdaten in paginierter Form anzeigen, mit 5 Elementen pro Seite
Wie Sie die Funktionen für die Buttons "Vorherige Seite" und "Nächste Seite" implementieren
Wie Sie die Buttons "Vorherige Seite" und "Nächste Seite" bei Bedarf (erste und letzte Seite) deaktivieren
Wie Sie die Paginierungsanzeige aktualisieren, um die aktuelle Seitenzahl und die Gesamtzahl der Seiten anzuzeigen

🏆 Errungenschaften

Nach Abschluss dieses Projekts können Sie:

Daten aus einer JSON-Datei mit Axios abrufen
Die Paginierungsfunktion für eine Kursliste implementieren
Benutzerinteraktionen mit den Buttons "Vorherige Seite" und "Nächste Seite" behandeln
Buttons bedingt basierend auf der aktuellen Seite deaktivieren
Die Benutzeroberfläche aktualisieren, um die aktuelle Seite und die Gesamtzahl der Seiten anzuzeigen

Projektstruktur einrichten

In diesem Schritt richten Sie die Projektdateien und -struktur ein. Befolgen Sie die folgenden Schritte, um diesen Schritt abzuschließen:

Öffnen Sie den Projektordner. Die Verzeichnisstruktur sieht wie folgt aus:

├── css
│   └── bootstrap.css
├── index.html
└── js
    ├── axios.js
    ├── carlist.json
    └── index.js

In dieser Struktur:

css/bootstrap.css ist die Bootstrap-Stylesheet-Datei, die im Projekt verwendet wird.
index.html ist die Hauptwebseite.
js/carlist.json ist die Datendatei, die für die Anfrage benötigt wird.
js/axios.js ist die Axios-Datei, die für die Anfrage verwendet wird.
js/index.js ist die JavaScript-Datei, die vervollständigt werden muss.

Klicken Sie auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Öffnen Sie als Nächstes "Web 8080" oben auf der VM und aktualisieren Sie die Seite manuell. Dann sehen Sie die Seite. Der Effekt sieht wie folgt aus:

Initialer Effekt

Daten aus der JSON-Datei abrufen

In diesem Schritt lernen Sie, wie Sie Daten aus der carlist.json-Datei abrufen und sie in der Variable data speichern.

Suchen Sie die Datei js/index.js und finden Sie den Kommentar // TODO: Requesting data from the carlist.json file.
Verwenden Sie die Methode axios.get(), um die Daten aus der Datei ./js/carlist.json abzurufen.
Sobald die Daten abgerufen wurden, speichern Sie sie in der Variable data.
Berechnen Sie die maximale Anzahl von Seiten, indem Sie die Gesamtzahl der Elemente durch die Anzahl der Elemente pro Seite (5) teilen. Speichern Sie diesen Wert in der Variable maxPage.
Rufen Sie die Funktion showPagination() auf und übergeben Sie maxPage und pageNum (das standardmäßig auf 1 festgelegt ist) als Argumente, um die aktuelle Seitenzahl und die Gesamtzahl der Seiten anzuzeigen.
Rufen Sie die Funktion getPageData() auf und übergeben Sie data als Argument, um die Daten für die erste Seite (Elemente 1 - 5) zu erhalten. Speichern Sie diese in der Variable pageData.
Rufen Sie die Funktion renderHtml() auf und übergeben Sie pageData als Argument, um das HTML für die erste Seite zu rendern.

Ihr Code sollte wie folgt aussehen:

let data;
let pageData;
// TODO: Requesting data from the carlist.json file
axios.get("./js/carlist.json").then((res) => {
  data = res.data;
  maxPage = Math.ceil(data.length / 5);
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
});

Funktion für die vorherige Seite implementieren

In diesem Schritt lernen Sie, wie Sie die Funktion für den Button "Vorherige Seite" implementieren.

Suchen Sie den Klick-Ereignishandler für den Button "Vorherige Seite" (prev.onclick).
Innerhalb des Ereignishandlers entfernen Sie zunächst die Klasse disabled vom Button "Nächste Seite" (next.classList.remove("disabled")).
Verringern Sie die Variable pageNum um 1, um zur vorherigen Seite zu wechseln.
Wenn pageNum kleiner oder gleich 1 ist, befinden wir uns auf der ersten Seite. Fügen Sie daher die Klasse disabled dem Button "Vorherige Seite" hinzu (this.classList.add("disabled")) und setzen Sie pageNum auf 1.
Rufen Sie die Funktion showPagination() auf und übergeben Sie maxPage und pageNum als Argumente, um die Paginierungsanzeige zu aktualisieren.
Rufen Sie die Funktion getPageData() auf und übergeben Sie data als Argument, um die Daten für die aktuelle Seite zu erhalten. Speichern Sie diese in der Variable pageData.
Rufen Sie die Funktion renderHtml() auf und übergeben Sie pageData als Argument, um das HTML für die aktuelle Seite zu rendern.

Ihr Code sollte wie folgt aussehen:

// Click on the previous page
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO
  next.classList.remove("disabled");
  pageNum--;
  if (pageNum <= 1) {
    this.classList.add("disabled");
    pageNum = 1;
  }
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
};

Funktion für die nächste Seite implementieren

In diesem Schritt lernen Sie, wie Sie die Funktion für den Button "Nächste Seite" implementieren.

Suchen Sie den Klick-Ereignishandler für den Button "Nächste Seite" (next.onclick).
Innerhalb des Ereignishandlers entfernen Sie zunächst die Klasse disabled vom Button "Vorherige Seite" (prev.classList.remove("disabled")).
Erhöhen Sie die Variable pageNum um 1, um zur nächsten Seite zu wechseln.
Wenn pageNum größer oder gleich maxPage ist, befinden wir uns auf der letzten Seite. Fügen Sie daher die Klasse disabled dem Button "Nächste Seite" hinzu (this.classList.add("disabled")) und setzen Sie pageNum auf maxPage.
Rufen Sie die Funktion showPagination() auf und übergeben Sie maxPage und pageNum als Argumente, um die Paginierungsanzeige zu aktualisieren.
Rufen Sie die Funktion getPageData() auf und übergeben Sie data als Argument, um die Daten für die aktuelle Seite zu erhalten. Speichern Sie diese in der Variable pageData.
Rufen Sie die Funktion renderHtml() auf und übergeben Sie pageData als Argument, um das HTML für die aktuelle Seite zu rendern.

Ihr Code sollte wie folgt aussehen:

// Click on the next page
let next = document.getElementById("next");
next.onclick = function () {
  // TODO
  prev.classList.remove("disabled");
  pageNum++;
  if (pageNum >= maxPage) {
    this.classList.add("disabled");
    pageNum = maxPage;
  }
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
};

Nun haben Sie die Implementierung der Paginierungsfunktion für die Kursliste abgeschlossen. Sie können die Funktion testen, indem Sie auf die Buttons "Vorherige Seite" und "Nächste Seite" klicken, um zu sehen, dass die Kursdaten korrekt angezeigt werden.

Ein GIF aller abgeschlossenen Funktionen sieht wie folgt aus:

Abgeschlossener Effekt