Comment ajouter du CSS à la pagination Laravel

Laravel est un framework PHP populaire qui est très apprécié pour sa facilité d'apprentissage, d'utilisation et d'extensibilité, et pour ses fonctionnalités puissantes. Parmi elles, la pagination est l’une des fonctions essentielles des applications Web. Cet article expliquera comment implémenter la pagination et ajouter des styles CSS dans Laravel.

1. Implémentation de la pagination dans Laravel

Dans le framework Laravel, la pagination est implémentée via la classe Paginator. La classe Paginator utilise Query Builder ou Eloquent ORM pour obtenir des données de la base de données et pagine les résultats en fonction de la taille de la page et du numéro de page actuel. Les étapes spécifiques sont les suivantes :

1. Introduire la classe Paginator

use Illuminate\Pagination\Paginator;

2. Récupérer les données

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

ou

$data = ModelName::paginate(5);

3. Afficher les données

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

{{ $data->links() }}

Le code ci-dessus récupérera les données de la table nommée "table_ nom" et ajoutez chaque page. Le nombre d'enregistrements est fixé à 5 et stocké dans une variable appelée "données". Dans la vue, nous pouvons parcourir les données via une boucle foreach et générer des liens de pagination via la méthode $data->links().

2. Ajoutez des styles CSS à Laravel

Laravel fournit des styles par défaut pour les liens de pagination. Cependant, nous pouvons modifier son apparence en personnalisant le CSS. Si vous souhaitez désactiver le style par défaut, vous pouvez le faire avec le code suivant :

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

Voici les étapes pour personnaliser le style CSS :

1. Créez un nouveau fichier CSS comme "pagination.css" dans le public/css annuaire.
2. Dans la vue, en introduisant le fichier CSS dans la balise head :

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

3. Ajouter des styles dans le fichier CSS

.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;
}

Les styles ci-dessus ajouteront des bordures arrondies aux liens de pagination, définiront la taille et la couleur de la police, et définissez la taille et la couleur de la police pour l'actuel. Ajoutez une couleur d'arrière-plan spécifique à la page.

3. Résumé

Il est très simple d'utiliser la classe Paginator pour implémenter la pagination dans le framework Laravel. Personnaliser le style de pagination n'est pas trop difficile, ajoutez simplement du code CSS. J'espère que cet article pourra être utile pour l'utilisation de la pagination Laravel et des styles CSS. Si vous avez des questions ou des suggestions, veuillez laisser un message dans la zone de commentaires et nous serons plus qu'heureux de répondre à vos questions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!