So fügen Sie CSS zur Laravel-Paginierung hinzu

Laravel ist ein beliebtes PHP-Framework, das für seine einfache Erlernbarkeit, Verwendung und Erweiterbarkeit sowie für seine leistungsstarken Funktionen hoch geschätzt wird. Unter diesen ist Paging eine der wesentlichen Funktionen in Webanwendungen. In diesem Artikel wird erläutert, wie Sie die Paginierung implementieren und CSS-Stile in Laravel hinzufügen.

1. Paging in Laravel implementieren

Im Laravel-Framework wird Paging über die Paginator-Klasse implementiert. Die Paginator-Klasse verwendet Query Builder oder Eloquent ORM, um Daten aus der Datenbank abzurufen und die Ergebnisse basierend auf der Seitengröße und der aktuellen Seitenzahl zu paginieren. Die spezifischen Schritte sind wie folgt:

1. Einführen der Paginator-Klasse

use Illuminate\Pagination\Paginator;

2. Daten abrufen

$data = DB::table('table_name')->paginate(5);

oder

$data = ModelName::paginate(5);

3. Daten anzeigen

@foreach ($data as $item)
    //
@endforeach

{{ $data->links() }}

Der obige Code ruft die Daten der Tabelle ab mit dem Namen „table_name“ und fügen Sie jede Seite hinzu. Die Anzahl der Datensätze wird auf 5 gesetzt und in einer Variablen namens „data“ gespeichert. In der Ansicht können wir die Daten durch eine foreach-Schleife durchlaufen und Paging-Links über die Methode $data->links() generieren.

2. CSS-Stile zu Laravel hinzufügen

Laravel bietet Standardstile für Paginierungslinks. Wir können jedoch das Erscheinungsbild ändern, indem wir CSS anpassen. Wenn Sie den Standardstil deaktivieren möchten, können Sie dies mit dem folgenden Code tun:

{{ $data->links('') }}

Hier sind die Schritte zum Anpassen des CSS-Stils:

1. Erstellen Sie eine neue CSS-Datei im Verzeichnis public/css, z. B. „pagination .css".
2. In der Ansicht, indem Sie die CSS-Datei im Head-Tag einfügen:

<link rel="stylesheet" href="{{ asset(&#39;css/pagination.css&#39;) }}" />

3. Stile in der CSS-Datei hinzufügen

.pagination li {
    display:inline-block;
    margin-right:5px;
    margin-bottom:5px;
    padding:5px 12px;
    border:1px solid #ccc;
    border-radius:5px;
    font-size:14px;
    color:#333;
    text-decoration:none;
}
.pagination .active {
    background-color:#007bff;
    border-color:#007bff;
    color:#fff;
}
.pagination .disabled {
    opacity:0.5;
    cursor:not-allowed;
}

Die oben genannten Stile fügen abgerundete Ränder zu den Paginierungslinks hinzu, legen die Schriftgröße und -farbe fest, und legen Sie den aktuellen Wert fest. Fügen Sie der Seite eine bestimmte Hintergrundfarbe hinzu.

3. Zusammenfassung

Es ist sehr einfach, die Paginator-Klasse zum Implementieren der Paginierung im Laravel-Framework zu verwenden. Das Anpassen des Seitenstils ist nicht allzu schwierig. Fügen Sie einfach CSS-Code hinzu. Ich hoffe, dass dieser Artikel bei der Verwendung von Laravel-Paginierung und CSS-Stilen hilfreich sein kann. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte eine Nachricht im Kommentarbereich und wir beantworten Ihre Fragen gerne.

Das obige ist der detaillierte Inhalt vonSo fügen Sie CSS zur Laravel-Paginierung hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!