Tutorial: Laravel Pagination mit Bootstrap - Schritt-für-Schritt-Anleitung

Tutorial: Laravel Pagination mit Bootstrap - Schritt-für-Schritt-Anleitung

In diesem Tutorial lernst du, wie man eine Pagination in Laravel mit Bootstrap Markup erstellt. Wir gehen Schritt für Schritt durch den Prozess, einschließlich der Erstellung einer Route, der Verwendung der paginate()-Methode, der Anzeige der Pagination in der View und der Anpassung des Bootstrap-Markups. Am Ende solltest du in der Lage sein, eine funktionierende Pagination in deiner Laravel-Anwendung zu erstellen.

Schritt 1: Erstellung der Route

Zunächst öffne die web.php-Datei in deinem Laravel-Projekt und erstelle eine neue Route. Hier ist ein Beispiel für eine Route, die Beiträge aus der "posts"-Tabelle abruft:

Route::get('/posts', function () {
    $posts = App\Models\Post::paginate(10);
    return view('posts.index', ['posts' => $posts]);
});

Diese Route gibt eine Paginierung-Instanz zurück, die 10 Beiträge pro Seite enthält.

Schritt 2: Verwendung der paginate()-Methode

Um die paginate()-Methode zu verwenden, rufst du sie auf der Modellklasse auf und gibst die Anzahl der Einträge pro Seite an. Hier ist ein Beispiel:

$posts = App\Models\Post::paginate(10);

Schritt 3: Anzeige der Pagination in der View

Als nächstes erstellen wir die View, um die paginierten Daten anzuzeigen. Hier ist ein Beispiel für eine View-Datei namens index.blade.php:

    <div class="row">
        @foreach ($posts as $post)
            <div class="col-md-4">
                <h3>{{ $post->title }}</h3>
                <p>{{ $post->body }}</p>
            </div>
        @endforeach
    </div>

    <div class="row">
        <div class="col-md-12">
            {{ $posts->links('vendor.pagination.bootstrap') }}
        </div>
    </div>
</div>

In diesem Beispiel wird eine Liste von Beiträgen angezeigt, die aus der $posts-Variable stammt. Am Ende der View wird die Bootstrap-Pagination angezeigt. Das links()-Funktion nimmt einen Parameter als Namen des Paginierung-Anbieters und generiert automatisch die Paginierungslinks.

Schritt 4: Anpassung des Bootstrap-Markups

Als letzten Schritt passen wir das Bootstrap-Markup an, um die Paginierung an unsere Bedürfnisse anzupassen. Hier sind einige Optionen, die du verwenden kannst, um das Markup anzupassen:

  • simplePaginate(): Verwendet eine einfachere Paginierung ohne Vorherige/Nächste-Links.
  • onEachSide(): Gibt an, wie viele Links links und rechts der aktuellen Seite angezeigt werden sollen.
  • appends(): Hinzufügen von Parametern zum Paginierungs-Link.

Hier ist ein Beispiel für die Verwendung von onEachSide():

$posts = App\Models\Post::paginate(10)->onEachSide(5);

Mit onEachSide(5) werden 5 Links links und rechts der aktuellen Seite angezeigt. Du kannst auch simplePaginate() verwenden, wenn du eine einfachere Paginierung bevorzugst.

Falls du das Bootstrap-Markup anpassen möchtest, öffne die Datei resources/views/vendor/pagination/bootstrap.blade.php in deinem Laravel-Projekt und ändere das Markup entsprechend deinen Bedürfnissen.

Fazit

Das war es! Jetzt solltest du in der Lage sein, eine funktionierende Pagination in deiner Laravel-Anwendung mit Bootstrap Markup zu erstellen. Die Paginierung erlaubt deinen Benutzern, durch eine große Anzahl von Datensätzen zu navigieren, indem sie die Daten in kleinere Gruppen aufteilt. Mit dem Bootstrap Markup kannst du die Paginierung schnell und einfach an deine Bedürfnisse anpassen.


Laravel Bootstrap Components

NEW Laravel Bootstrap Components absofort verfügbar

Laravel Bootstrap Components ist ein Starter-Kit für Laravel mit Blade und Bootstrap speziell entwickelt für Entwickler.

META
Kategorie:
Laravel
Autor:
Markus Zundel
Datum:
17.02.2023
Impressum

© 2024 Zundel-Webdesign - Alle Rechte vorbehalten.
Die als Artikel veröffentlichten Inhalte unterliegen dieser Creative Commons Licence.