Bladeでページネーションを実装する方法【Laravel】

この記事では、LaravelのBladeでページネーションを実装する方法を解説します。

結論から書くと、コントローラで paginate() を呼び、Bladeで {{ $items->links() }} を書くだけです。デザインを変えたい場合だけ、テンプレートを差し替えます。

検索条件やソートを付けている場合は withQueryString() を忘れないでください。これが無いと、2ページ目に移動した時点で条件が消えます。よくあるつまずきどころです。

LaravelのBladeでページネーションを実装する手順

Laravelでは、ページネーションを簡単に実装できる機能が用意されています。まず最初に、コントローラーでデータベースから取得したコンテンツをpaginate()メソッドを使ってページネーション可能な形式にします。

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

次に、Bladeテンプレートで実際にページネーションを表示します。Bladeでは、paginate()メソッドで取得したデータを簡単にリストとして表示することができます。

@foreach ($items as $item)
    <!-- コンテンツを表示する部分 -->
@endforeach

<!-- ページネーションリンクの表示 -->
{{ $items->links() }}

Laravelのpaginate()メソッドはデフォルトのスタイルが適用されますが、カスタマイズも可能です。ページネーションのデザインや表示するページ数を変更することができます。

ページネーションのデザインを変更するには、links() に使いたいビューを渡します。

{{ $items->links('pagination.custom') }}

自分で1から書く前に、Laravelが用意しているビューを書き出して、それを編集するほうが早いです。

php artisan vendor:publish --tag=laravel-pagination

resources/views/vendor/pagination/ にテンプレートが出力されるので、これを直接編集できます。

Bootstrapを使っている場合は、ビューを書かずに切り替えられます。AppServiceProvider の boot() に次を書きます。

use Illuminate\Pagination\Paginator;

public function boot(): void
{
    Paginator::useBootstrapFive();
}

デフォルトでは、1ページに表示されるアイテムの数は15ですが、これを変更したい場合はpaginate()メソッドの引数に表示したいアイテム数を渡します。

$items = DB::table('items')->paginate(20);

結論：URLのクエリ文字列を次のページへ引き継ぐには withQueryString() を付けます。

$items = DB::table('items')
    ->where('category', $request->category)
    ->paginate(10)
    ->withQueryString();

これが無いと、検索して絞り込んだ状態で2ページ目を開いたときに、条件が外れた一覧が出ます。ユーザーからは「検索が効かない」ように見えるので、原因に気づきにくい不具合です。

件数が非常に多いテーブルでは、simplePaginate() も検討してください。

$items = DB::table('items')->simplePaginate(10);

paginate() は総件数を数えるために COUNT クエリを実行しますが、simplePaginate() は実行しません。「前へ・次へ」だけでよいなら、こちらのほうが速くなります。ページ番号の一覧は表示できなくなります。

この記事では、LaravelのBladeでページネーションを実装する方法を解説しました。

要点は3つです。

Laravelの開発環境をこれから作る場合は、Dockerを使ってLaravel/Blade環境構築からscss導入までにまとめています。作ったサイトをサーバーに載せる手順はLaravelをgitでXserverにデプロイする手順9ステップをどうぞ。