スタイルなしでlaravelのページネーションを解決する方法

PHPz
リリース: 2023-04-09 09:30:02
オリジナル
713 人が閲覧しました

Laravel は、開発者が高品質の Web アプリケーションを簡単に構築するための便利な機能とツールを多数提供する、非常に人気のある最新の開発フレームワークです。一般的な機能の 1 つはページングです。Laravel には便利なページング ツールが組み込まれていますが、多くの開発者はページング スタイルが見つからないという問題に遭遇します。この記事では、この問題を解決する方法を説明します。

Laravel のページング関数を使用するには、クエリ ビルダーまたは Eloquent モデル オブジェクトを通じてページング クエリを実行できます。たとえば、次のコードを使用して、すべてのユーザー データをクエリし、ページングで表示できます。

use Illuminate\Support\Facades\DB;
use App\Models\User;

$users = DB::table('users')->paginate(10);

// 或者可以使用Eloquent模型对象进行分页查询

$users = User::paginate(10);
ログイン後にコピー

上記のコードを通じて、現在のページング ユーザー データ、ページングを含むページング オブジェクト $users を取得できます。関連リンクとその他のページネーション プロパティ。デフォルトでは、Laravel のページング ツールには、ブートストラップとセマンティック UI という 2 つの組み込みページング スタイル セットがあります。

ただし、独自に定義した CSS スタイルなど、別のページング スタイルを使用する場合は、カスタマイズされた構成を実行する必要があります。

まず、カスタマイズしたページング スタイルのテンプレートとして機能するビュー ファイルを作成する必要があります。新しいテンプレート ファイル pagination.blade.php を resource/views/vendor/pagination/ ディレクトリに作成できます。次に、必要な HTML スタイルと CSS スタイルをこのファイルに記述します。以下は簡単な例です:

<div class="pagination-style">
   <ul class="pagination">

       {{-- Previous Page Link --}}
       @if ($paginator->onFirstPage())
           <li class="disabled"><span>&laquo;</span></li>
       @else
           <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">&laquo;</a></li>
       @endif

       {{-- Next Page Link --}}
       @if ($paginator->hasMorePages())
           <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">&raquo;</a></li>
       @else
           <li class="disabled"><span>&raquo;</span></li>
       @endif

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

           {{-- Array Of Links --}}
           @if (is_array($element))
               @foreach ($element as $page => $url)
                   @if ($page == $paginator->currentPage())
                       <li class="active"><span>{{ $page }}</span></li>
                   @else
                       <li><a href="{{ $url }}">{{ $page }}</a></li>
                   @endif
               @endforeach
           @endif
       @endforeach
   </ul>
</div>
ログイン後にコピー

上記のコードでは、Bootstrap スタイルに基づいて独自の CSS スタイルを定義し、Laravel のデフォルトのページネーション テンプレートをオーバーライドします。特定の実装の詳細は次のとおりです:

  1. $paginator->previousPageUrl() および $paginator->nextPageUrl() を通じてページング リンクを取得し、それを HTML にレンダリングします。 is_string() は、対応するレンダリングを実行するために、現在の要素がページング リストの "..." 区切り文字であるかどうかを判断します。
  2. $is_array() を使用して、現在の要素がページ番号リンクであるかどうかを判断します。ページング リストにあるので、それに応じてレンダリングされます。
  3. 次に、カスタマイズされたページネーション テンプレートを使用することを Laravel に伝える必要があります。 /config/view.php に新しい構成項目を追加できます。
'pagination' => 'vendor.pagination.pagination'
ログイン後にコピー

ここのvendor.pagination.paginationは、作成したばかりのページング テンプレート ファイルへのパスを表します。

最後に、ビュー ファイルで、次の方法でカスタマイズしたページング テンプレートを呼び出すことができます:

{{ $users->links('vendor.pagination.pagination') }}
ログイン後にコピー

上記の手順を通じて、Laravel で独自のページング スタイルをカスタマイズできます。もちろん、よりリッチなページング スタイルを実装したい場合は、Laravel のページング機能を拡張することで実現できます。

以上がスタイルなしでlaravelのページネーションを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート