【Laravel Livewire】ページネーションを実装してみよう

こんにちは。今回はLivewireでページネーションを設定する方法を解説します。

ページネーションとは

ページネーションとはページ割のことです。表示するデータが多い場合に、複数のページに分けて表示する機能です。画像で例をお見せします。

赤枠の部分がページネーション

多くのデータをリスト表示する場合にページネーションがあると便利です。理由は以下のようなものが挙げられます。

  • 目的の情報を見失わない
  • 表示速度が低下しない

ユーザーに取って一番大切なのは、理由の１番目「目的の情報を見失わない」ではないでしょうか。多くのデータを表示するページは情報量が多いのでスクロールが長くなりがちです。そうなると必要な情報がどこにあるのか特定しづらくなります。そこでページを分けることによって、「この情報は２ページ目にある」と識別することができるので、情報を特定しやすくなります。

２番目の「表示速度が低下しない」は、サイトのユーザービリティに関わる重要な事項です。ページの表示処理量はデータの増加に比例して増大します。当サイトでいうところの記事一覧などは、記事が増えるたびにサイトの表示速度がすこしずつ遅くなっていきます。そこで役に立つのがページネーションです。１ページに表示するデータの量を定めて、それを超えたら次のページに表示するようにすれば、データが増えても１度に取得するデータの量は増えません。表示速度の低下を防ぐことができます。

ページネーションの概要が理解できたところで、Livewireでの実装方法を解説していきます。

Livewireでページネーションを実装する

Livewireでページネーションを実装するには、まず、CLASS側でWithPaginationトレイトを使用できるようuseで取り込みます。モデルからデータを取得する際にpaginateメソッドを使用して取得します。CLASS側の設定はこれだけでOKです。

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\Models\User;

class UserList extends Component
{
    use WithPagination;

    public function render()
    {
        return view('livewire.user-list', [
			'users' => User::paginate(10),
		]);
    }
}

VIEW側では取得したデータを通常通りforeachなどで表示します。ページネーション用のコントロールはlinksメソッドで作ることができます。以下の例では$users->linksの部分がページネーション用のコントロールです。

<div>
	<ul>
    @foreach($users as $user)
		<li> {{ $user->name }} </li>
	@endforeach
	</ul>

	{{ $users->links() }}
</div>

以上のコードを実行すると以下のような表示となります。$usersから取得したデータが10件表示されており、一番下にページ遷移用のコントロールが表示されています。

見た目をbootstrapっぽくする

上記の例ではCSS設定をしていないので、見た目が少し寂しくなっています。そこでページ遷移用のコントロールの見た目をbootstrapっぽく変更してみましょう。

注意：bootstrapの見た目にするためにはbootstrap本体をロードしておく必要があります。CDNでアプリ本体にロードしておいてください。

CLASS側の設定です。$paginationThemeという変数にbootstrapを設定します。設定は以上で完了です。

  use WithPagination;

	protected $paginationTheme = 'bootstrap';

表示してみると、ページ遷移のコントロールがbootstrapっぽい見た目になっていることが判ります。

まとめ

いかがでしょうか。Livewireでページネーションを実装する方法を解説しました。Webアプリケーションのリスト表示では必ずと行ってよいほど使うテクニックです。是非覚えておきましょう。

Laravel

Posted by kobainmac