Laravelでカスタムスタイルのページング機能を実装する方法

Laravel フレームワークの継続的な開発により、ますます多くの Web プロジェクトが Laravel フレームワークを選択するようになり、もちろん、多くの開発者が独自の Web サイトの開発に Laravel を使用することを選択しています。日常の開発では、機能を実装するために、最初にオープン ソース ライブラリを探すか、コンポーネントを自分で作成するのが通常のアプローチです。これまでの経験や概要がインターネット上にたくさんあります。この記事はそのうちの 1 つです。その方法を説明します。 Laravel には、カスタム スタイルのページングを実装するための独自のページング クラスが付属しています。

Laravel 独自のページング クラス

Laravel フレームワークには、非常に使いやすいページング ライブラリが付属しています。コントローラーでは通常、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 職人の 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>

ページング リンクは通常、そこにあります。あまり多くはありませんし、ページごとにページング リンクのスタイルも異なる可能性があるため、ここでは簡単な変更方法のみを提供します。開発者は独自のニーズに応じて柔軟に調整できます。

概要

この記事の導入部を通じて、Laravel フレームワークに付属するページング クラスがどのように実装されるか、またカスタム ビューを通じてページング リンクのスタイルを変更する方法を学びました。もちろん、このカスタマイズはページネーション スタイルに限定されず、開発者は他のさまざまなレイアウト スタイルにも適用できます。

優れた開発者は、実際の開発において、常にフレームワークの可能性を発見し、自分のニーズに合わせて最適化することができ、優れた開発者になるために習得しなければならない技術の一つです。この記事が皆さんのお役に立てば幸いです。また、皆さんが Laravel フレームワークをより深く理解して応用できることを願っています。

以上がLaravelでカスタムスタイルのページング機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。