Paginierung in Vanilla JavaScript

Einleitung

Beim Erstellen einer Website oder Webanwendung, insbesondere wenn sie viele Funktionen enthält Vorlage Inhalt (z. B. ein Raster oder eine Liste von Elementen, die zu einer Kategorie gehören) – dies ist im Allgemeinen eine gute Idee teile es in Seiten auf um die Anzahl der gleichzeitig auf dem Bildschirm erscheinenden Elemente zu reduzieren.

In diesem Artikel lernen wir, wie Sie Seitenumbrüche in unseren Webprojekten mit Vanilla JavaScript von Grund auf implementieren.

Für die Zwecke dieses Artikels werden wir den Inhalt von abrufen fehlen uns die Worte. Beispiel-API-Antwort. Es enthält 100 Datenpunkte, aber wir verwenden nur 30 und zeigen 6 Beiträge gleichzeitig auf unserem Bildschirm an.

Erste Schritte

Bevor wir alle erforderlichen Beiträge von der API mithilfe der im Browser integrierten Fetch-API abrufen, müssen wir zunächst ein grundlegendes HTML-Markup erstellen, das später dynamisch über unser Skript gefüllt wird:

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

Abrufen von REST-API-Beiträgen

Wie bereits erwähnt, geht es bei der Paginierung darum, Inhalte in kleinere Teile aufzuteilen. Es erfordert, dass Sie die Daten abrufen, entscheiden, wann und wie aufgeteilt werden soll, die Anzahl der Seiten berechnen und dem Benutzer dann einen Teil davon zeigen. Glücklicherweise erledigt die Backend-Funktion normalerweise die ersten paar Aufgaben und gibt die relevante Seite, die Gesamtzahl der Seiten und den Inhalt zurück pro Seite.

Beginnen wir damit, zuerst alle unsere Posts abzurufen und später werden wir dies ändern, um nur wenige Datenpunkte pro Seite abzufragen:

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

Lassen Sie uns den obigen Code schnell untersuchen. Zunächst begannen wir mit der Beschaffung der div -Element, in dem wir alle unsere Inhalte über das anzeigen würden class Namen, den wir dem zugewiesen haben div. Schließlich haben wir eine Funktion geschrieben, um die Abrufoperation zu handhaben.

Im fetchPosts() Funktion haben wir die verwendet Fetch API um Beiträge aus dem abzurufen API für JSON-Platzhalterbeiträge, speichern Sie dann die JSON-Daten, auf die verwiesen wird posts Variable und verwendet die innerHTML -Eigenschaft, um jedes Inhaltselement der hinzuzufügen posts-section indem Sie sie durchlaufen.

Zu diesem Zeitpunkt haben wir alle unsere Inhalte erfolgreich abgerufen.

Beginnen wir mit der Deklaration von drei Variablen, die für die Implementierung der Paginierung auf unserer Webseite entscheidend sind. Der erste ist der Anzahl der Posts, die wir pro Seite deklarieren möchten, dann ist die aktuelle Seitenzahl (1 standardmäßig) und die Gesamtzahl der Seiten.

Für diesen Leitfaden geben wir die Gesamtzahl der Seiten eine feste Anzahl von 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

Im vorherigen Abschnitt haben wir alle Posts auf einer einzigen Seite angezeigt, aber wir möchten nur sechs gleichzeitig anzeigen. Daher haben wir die eingestellt numberPerPage zu 6 die wir jetzt verwenden werden, um den Abrufvorgang so anzupassen, dass er nur angezeigt wird 6 Beiträge.

Es hängt von der spezifischen Implementierung ab, aber es ist weit verbreitet, die Verwendung von Abfrageparametern beim Abrufen von Ergebnissen von APIs zuzulassen, die es Ihnen ermöglichen, einen bestimmten Wert abzurufen Seite der Ergebnisse. Zum Beispiel ermöglicht die von uns verwendete Schein-REST-API die page und limit Parameter, mit denen Sie nur Stapel laden können, die Sie zu einem bestimmten Zeitpunkt anzeigen.

Auf diese Weise laden wir nur die Daten, die wir dem Benutzer zeigen möchten! Wir können dann entweder die nächste Seite vorab abrufen, um die Ladezeit zu verkürzen, oder uns an der Rechenbeschleunigung erfreuen, die erreicht wird, indem nur die anzuzeigenden Daten geladen werden.

Wir werden diese Parameter verwenden, indem wir unsere Abrufanforderung ändern:

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

Im obigen Code haben wir die beiden Parameter zum API-Endpunkt hinzugefügt, nämlich die pageNumber und für Anzahl der Beiträge pro Seite was uns helfen würde, unsere Posts auf mehrere Seiten aufzuteilen, und dann können diese Posts jetzt basierend auf der Seitenzahl angezeigt werden.

Zusätzlich haben wir auch in der bestanden pageNumber zu den fetchPosts() Funktion, damit wir diese Funktion aufrufen können, wenn sich die Seite ändert:

Lassen Sie uns nun den Seitennavigationsschaltflächen unten auf unserer Seite Funktionalität hinzufügen und sie den entsprechenden Inhalt basierend auf der Seitennummer anzeigen lassen.

Wir werden feststellen, dass wir im Markup einen Abschnitt hatten, in dem die Paginierungsschaltflächen angezeigt wurden:

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

Wir werden jetzt hinzufügen click Ereignisse für jede Schaltfläche, sodass beim Anklicken der für diese Seite vorgesehene Inhalt angezeigt wird.

Implementierung der Vorherige Taste

Die Logik hier ist ziemlich einfach. Alles, was wir tun müssen, ist, das Element abzurufen, das die darstellt Zurück-Taste, Ergänzen Sie die click Ereignis-Listener darauf und zeigt den entsprechenden Inhalt an, wenn auf die Schaltfläche geklickt wird:

const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

Nach dem Hinzufügen von a click Event-Listener haben wir überprüft, ob die aktuelle Seitenzahl größer als ist 1 in der Rückruffunktion. Wenn die Zahl kleiner oder gleich ist 1, wir zeigen einfach weiterhin den aktuellen Inhalt an. Aber wenn die aktuelle Seitenzahl größer ist als 1 wir können seinen Wert frei dekrementieren und die aufrufen fetchPosts(pageNumber) Funktion mit der darin übergebenen neuen Seitennummer als Argument und zeigt somit den Inhalt der vorherigen Seite an.

Implementierung der Weiter Taste

Die Logik hier ist völlig dieselbe wie für die früher Knopf, mit nur ein paar kleinen Änderungen. Natürlich rufen wir das Listenelement mit der Klasse ab next statt prev. Außerdem prüfen wir, ob die aktuelle Seitenzahl kleiner als die ist Seitenzahl worauf wir uns einstellen 30 manuell früher. Am Ende erhöhen wir die aktuelle Seitenzahl, anstatt sie zu verringern:

const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});

Zusammenfassung

Das Aufteilen von Inhalten in kleinere, besser verwaltbare Teile, die einzeln angezeigt werden, ist von entscheidender Bedeutung, wenn Sie versuchen, eine Datenbank oder eine andere Datenquelle in Ihrer Webanwendung anzuzeigen.

In diesem Artikel haben wir uns angesehen, wie Sie die Paginierung mit JavaScript von Grund auf neu implementieren, ohne externe Bibliotheken und Tools.

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://stackabuse.com/pagination-in-vanilla-javascript/