Das Erstellen einer Paginierung in Bootstrap 5 ist einfach und unkompliziert. So können Sie es machen:
1. Bootstrap-CSS und JavaScript einbinden:
Stellen Sie zunächst sicher, dass Sie die CSS- und JavaScript-Dateien von Bootstrap in Ihr Projekt eingebunden haben. Sie können Bootstrap von der offiziellen Website herunterladen oder ein CDN verwenden wie:
2. Erstellen Sie das Paginierungs-Markup:
Als Nächstes müssen Sie das HTML-Markup für die Paginierung erstellen. Die Grundstruktur umfasst eine ungeordnete Liste („
“) mit „li“-Elementen, die jede Seitennummer oder jedes Navigationssteuerelement darstellen (wie „Vorheriges“ und „Nächstes“).
```html
„
- Die Klasse „page-item“ wird für jedes Paginierungselement verwendet und die Klasse „active“ wird zur aktuellen Seitennummer hinzugefügt, um sie hervorzuheben.
- Sie können die Seitenzahlen, die Navigationssteuerung und die Anzahl der angezeigten Seitenzahlen entsprechend Ihren Anforderungen anpassen.
3. Paginierungsfunktion hinzufügen:
Um der Paginierung Funktionalität hinzuzufügen, müssen Sie JavaScript verwenden. Bootstrap stellt JavaScript-Methoden und -Ereignisse für die Paginierung bereit. Sie können Klickereignisse auf Paginierungslinks verarbeiten und AJAX-Anfragen ausführen oder Seiteninhalte basierend auf der ausgewählten Seite dynamisch aktualisieren.
Hier ist ein einfaches Beispiel für das Hinzufügen von Click-Event-Handlern:
„Javascript
// Alle Paginierungslinks abrufen
var pagelinks =document.querySelectorAll('.page-link');
// Click-Event-Handler zu jedem Link hinzufügen
pagelinks.forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
// Seitenzahl aus dem Link abrufen
var page =link.textContent;
// Den Inhalt für die angegebene Seite mit AJAX oder anderen Methoden laden
LoadPageContent(Seite);
});
});
// Funktion zum Laden von Inhalten für die angegebene Seite
Funktion loadPageContent(page) {
// AJAX-Aufruf oder anderer Code zum Laden von Inhalten für die angegebene Seite
// Seiteninhalt aktualisieren
}
„
Durch die Verarbeitung der Klickereignisse auf Paginierungslinks können Sie Inhalte basierend auf der Benutzerauswahl dynamisch laden.
Denken Sie daran, das HTML-Markup und den JavaScript-Code an Ihren spezifischen Anwendungsfall und Ihre Anforderungen anzupassen. Bootstrap 5 bietet zusätzliche Anpassungsoptionen und Stile für die Paginierung, die Sie in der Dokumentation erkunden können.
