Comment implémenter la fonction de pagination de style personnalisé dans Laravel

Avec le développement continu du framework Laravel, de plus en plus de projets Web le choisissent désormais. Bien entendu, de nombreux développeurs choisissent également d'utiliser Laravel pour développer leurs propres sites Web. Dans le développement quotidien, pour l'implémentation de fonctions, l'approche habituelle consiste à rechercher d'abord des bibliothèques open source ou à écrire vous-même des composants. Il existe de nombreuses expériences et résumés antérieurs sur Internet. Cet article en fait partie. utilisez-le. Laravel est livré avec sa propre classe de pagination pour implémenter une pagination de style personnalisée.

La propre classe de pagination de Laravel

Le framework Laravel est livré avec une bibliothèque de pagination, très pratique à utiliser. Dans le contrôleur, nous utilisons généralement la méthode paginate() pour interroger les données et renvoyer les résultats de pagination, tandis que dans le modèle Blade, nous pouvons directement utiliser la méthode links() pour rendre liens de pagination. , regardez le code ci-dessous : paginate() 方法来查询数据并返回分页结果，而在 Blade 模板中我们可以直接使用 links() 方法来渲染分页链接，看下面的代码：

// 在控制器中查询数据并返回分页结果
$data = DB::table('table_name')->paginate(15);

// 在 Blade 模板中通过 links() 方法渲染分页链接
{{ $data->links() }}

这样代码就完成了分页查询的工作，并且将分页链接渲染到了页面上。但是这样的链接样式是默认的，如果想要更改样式，我们需要自定义视图。

自定义视图

我们先来了解下 links() 方法，我们可以在 Blade 模板中输出一下 {{ $data->links() }} 的值，得到的结果是这样的：

<ul class="pagination">
    <li class="page-item disabled" aria-disabled="true" aria-label="&laquo; Previous">
        <span class="page-link" aria-hidden="true">&lsaquo;</span>
    </li>
    <li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
    <li class="page-item"><a class="page-link" href="http://localhost?page=2">2</a></li>
    <li class="page-item"><a class="page-link" href="http://localhost?page=3">3</a></li>
    <li class="page-item"><a class="page-link" href="http://localhost?page=4">4</a></li>
    <li class="page-item"><a class="page-link" href="http://localhost?page=5">5</a></li>
    <li class="page-item">
        <a class="page-link" href="http://localhost?page=2" rel="next" aria-label="Next &raquo;">&rsaquo;</a>
    </li>
</ul>

我们发现，links() 方法默认渲染的分页链接是一个无序列表，每一项都是一个独立的 li 元素，其中 active 类表示当前页码，disabled 类表示不可用的页码。如果我们想要自定义分页链接的样式，就需要在视图文件中覆盖 Laravel 默认的链接渲染。

在 Laravel 中，可以使用 php artisan make:view 命令来生成视图文件，如下：

php artisan make:view pagination

这个命令将在 resources/views 目录下创建一个名为 pagination.blade.php 的文件。在该文件中写入如下代码：

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang(&#39;pagination.previous&#39;)">
                    <span class="page-link" aria-hidden="true">&lsaquo;</span>
                </li>
            @else
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
                </li>
            @endif

            {{-- Pagination Elements --}}
            @foreach ($elements as $element)
                {{-- "Three Dots" Separator --}}
                @if (is_string($element))
                    <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
                @endif

                {{-- Array Of Links --}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
                        @else
                            <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
                        @endif
                    @endforeach
                @endif
            @endforeach

            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
                </li>
            @else
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang(&#39;pagination.next&#39;)">
                    <span class="page-link" aria-hidden="true">&rsaquo;</span>
                </li>
            @endif
        </ul>
    </nav>
@endif

这段代码是 Laravel 默认的分页视图代码，我们可以将其拷贝到 pagination.blade.php

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    @if ($paginator->onFirstPage())
        <li class="page-item disabled"><span class="page-link">上一页</span></li>
    @else
        <li class="page-item"><a class="page-link" href="{{ $paginator->previousPageUrl() }}">上一页</a></li>
    @endif

    @foreach ($elements as $element)
        @if (is_string($element))
            <li class="page-item disabled"><span class="page-link">{{ $element }}</span></li>
        @endif

        @if (is_array($element))
            @foreach ($element as $page => $url)
                @if ($page == $paginator->currentPage())
                    <li class="page-item active"><span class="page-link">{{ $page }}</span></li>
                @else
                    <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
                @endif
            @endforeach
        @endif
    @endforeach

    @if ($paginator->hasMorePages())
        <li class="page-item"><a class="page-link" href="{{ $paginator->nextPageUrl() }}">下一页</a></li>
    @else
        <li class="page-item disabled"><span class="page-link">下一页</span></li>
    @endif
  </ul>
</nav>

De cette façon, le code termine le travail de requête de pagination et restitue le lien de pagination vers la page. Mais ce style de lien est celui par défaut. Si nous voulons modifier le style, nous devons personnaliser la vue.

Vue personnalisée

Commençons par comprendre la méthode links() Nous pouvons la générer dans le modèle Blade {{ $data->links() }} value. , le résultat est le suivant :

rrreee

Nous avons constaté que le lien de pagination rendu par la méthode links() est par défaut une liste non ordonnée, et chaque élément est un liindépendant >, où la classe active représente le numéro de page actuel et la classe disabled représente un numéro de page indisponible. Si nous souhaitons personnaliser le style des liens de pagination, nous devons remplacer le rendu des liens par défaut de Laravel dans le fichier de vue.

Dans Laravel, vous pouvez utiliser la commande php artisan make:view pour générer un fichier de vue, comme suit :

rrreee

Cette commande créera un nom dans les ressources/vues code> répertoire Le fichier est <code>pagination.blade.php. Écrivez le code suivant dans ce fichier :

rrreee

Ce code est le code de vue de pagination par défaut de Laravel. Nous pouvons le copier dans le fichier pagination.blade.php puis le personnaliser. Réviser. 🎜🎜Style personnalisé🎜🎜Le style personnalisé dépend des préférences du développeur. Par exemple, nous pouvons modifier le lien de pagination en un style de bouton : 🎜rrreee🎜Comme il n'y a généralement pas trop de liens de pagination, et les styles de lien de pagination des différentes pages. Cela peut également être différent, nous ne proposons donc ici qu'une méthode de modification simple, et les développeurs peuvent l'ajuster de manière flexible en fonction de leurs propres besoins. 🎜🎜Résumé🎜🎜Grâce à l'introduction de cet article, nous avons appris comment la classe de pagination fournie avec le framework Laravel est implémentée et comment modifier le style des liens de pagination via des vues personnalisées. Bien entendu, cette personnalisation ne se limite pas aux styles de pagination, les développeurs peuvent également l'appliquer à divers autres styles de mise en page. 🎜🎜En développement réel, les excellents développeurs peuvent toujours découvrir le potentiel du framework et l'optimiser en fonction de leurs propres besoins. C'est l'une des technologies qu'il faut maîtriser pour devenir un excellent développeur. J'espère que cet article pourra être utile à tout le monde, et j'espère également que tout le monde pourra avoir une compréhension et une application plus approfondies du framework Laravel. 🎜

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!