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

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

Laravel フレームワークには、非常に使いやすいページング ライブラリが付屬しています。コントローラーでは通常、paginate() メソッドを使用してデータをクエリし、ページネーションの結果を返しますが、Blade テンプレートでは、links() メソッドを直接使用してページネーション リンクをレンダリングできます。については、次のコードを參照してください。

//?在控制器中查詢數(shù)據(jù)并返回分頁結果
$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 クラスは現(xiàn)在のページ番號を表し、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 フレームワークに付屬するページング クラスがどのように実裝されるか、またカスタム ビューを通じてページング リンクのスタイルを変更する方法を學びました。もちろん、このカスタマイズはページネーション スタイルに限定されず、開発者は他のさまざまなレイアウト スタイルにも適用できます。

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

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