🔗

Laravelで作る一覧画面: ページネーション

2021/12/10に公開1

LaravelのページネーションはEloquentもしくはクエリビルダと統合されています。
そのためデフォルトであれば、ごく少ないコード量で実現できます。

実装方法

Controller

全件取得であればall()メソッドを使うところを、paginate()メソッドに置き換えるだけです。
引数に表示件数を指定します。


class ItemController extends Controller
{
    private $data;

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        // all()の代わりにpagenate()を使用
        // $items = Item::all();
	$items = Item::paginate(20);
        $this->data['items'] = $items;

        return view('item.index', $this->data);
    }
    
    ...
}

view

ページネーションを表示させたい箇所にlinks()メソッドを使って表示させます。

<!-- 一覧表示 -->

<!-- ページネーション -->
{{ $items->links() }}

引数を何も指定しない場合は、ページネーションの表示にはデフォルトのテンプレート(Tailwind CSS)が使用されます。
引数を指定すると、ページネーション表示用のテンプレートを指定できます。
下記はBootstrap4を使う例です。

{{ $items->links('vendor.pagination.bootstrap-4') }}

オリジナルのページネーション表示用テンプレートを作成

標準で用意されているテンプレートをapp内にコピーしてきて改変するのが早いです。
まずはartisanコマンドでvendorにあるテンプレートをコピーしてきます。

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

これでresources/views/vendor/pagination内にページネーション表示用Bladeファイルがコピーされます。 例えばこのようなファイルができます。

bootstrap-4.blade.php
default.blade.php
semantic-ui.blade.php
simple-bootstrap-4.blade.php
simple-default.blade.php
simple-tailwind.blade.php
tailwind.blade.php

この中の1つを複製してカスタム表示用に調整をしていきます。
複製元はイメージに近いものがよいでしょう。
ここではbootstrap-4.blade.phpをコピーしてbootstrap-custom.blade.phpを作成、bootstrap-custom.blade.phpを適当に調整したとします。

viewでは作ったテンプレートファイル名を引数にすれば完了です。

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

Discussion