Livewire 2.x ペジネーション

Livewireはコンポーネント内で結果をペジネーションする機能を提供します。この機能はLaravelのネイティブページネーション機能にフックしているため、目に見えない機能のように感じるはずです。

ペジネーションデータ

show-postsコンポーネントがあり、結果を１ページあたり１０件の投稿に制限したいとします。

Livewireが提供するWithPaginationトレイトを使用して、結果をページ分割できます。

use Livewire\WithPagination;

class ShowPosts extends Component
{
    use WithPagination;

    public function render()
    {
        return view('livewire.show-posts', [
            'posts' => Post::paginate(10),
        ]);
    }
}
<div>
    @foreach ($posts as $post)
        ...
    @endforeach

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

これで、投稿の下部にさまざまなページのHTMLリンクがレンダーリングされ、結果がページ付けされます。

データのフィルタリング後のペジネーションリセット

ペジネーションした結果セットをフィルタリングするときの一般的なパターンは、フィルタリングを適用したときに現在のページを"1"にリセットすることです。

たとえば、ユーザーがデータセットのページ"4"にアクセスし、検索フィールドに入力して結果を絞り込む場合、通常はページを"1"にリセットするのが望ましいでしょう。

LivewireのWithPaginationトレイトは、これを行うために->resetPage()メソッドを用意しています。

このメソッドは、updating/updatedライフサイクルフックと組み合わせて使用​​して、特定のコンポーネントデータが更新されたときにページをリセットできます。

use Livewire\WithPagination;

class ShowPosts extends Component
{
    use WithPagination;

    public $search = '';

    public function updatingSearch()
    {
        $this->resetPage();
    }

    public function render()
    {
        return view('livewire.show-posts', [
            'posts' => Post::where('title', 'like', '%'.$this->search.'%')->paginate(10),
        ]);
    }
}

Multiple paginators on the same page

Because Livewire hardcodes the $page property inside the WithPagination trait, there is no way to have two different paginators on the same page because each will be competing for the same property name in the query string of the URL bar.

Here's an example of two different components that might exist on the same page. By giving the second one (the comments one) a name, Livewire will pick it up and handle everything accordingly.

class ShowPosts extends Livewire\Component
{
    public function render()
    {
        return view('livewire.show-posts', [
            'posts' => Post::paginate(10),
        ]);
    }
}
class ListPostComments extends Livewire\Component
{
      public Post $post;

    public function render()
    {
        return view('livewire.show-posts', [
            'posts' => $post->comments()->paginate(10, ['*'], 'commentsPage'),
        ]);
    }
}

Now in the query string, both paginators will be represented like so:

?page=2&commentsPage=3

Bootstrapページネーションテーマの使用

Laravelと同様に、Livewireのデフォルトのペジネーションビューはスタイル設定にTailwindクラスを使用します。アプリケーションでBootstrapを使用する場合は、コンポーネントの$paginationThemeプロパティを使用して、ページネーションビューのBootstrapテーマを有効にできます。

class ShowPosts extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

カスタムページネーションビューの使用

Livewireは、$results->links()を呼び出すときにレンダーされる、ページネーションリンクのBladeビューをカスタマイズする方法を３つ提供しています。

方法Ａ:ビュー名を->links()メソッドへ直接渡します。

<div>
    @foreach ($posts as $post)
        ...
    @endforeach

    {{ $posts->links('custom-pagination-links-view') }}
</div>

方法Ｂ:コンポーネントのpaginationView()メソッドをオーバーライドします。

class ShowPosts extends Component
{
    use WithPagination;

    ...

    public function paginationView()
    {
        return 'custom-pagination-links-view';
    }

    ...
}

方法Ｃ: LiveWireのペジネーションビューをリソース公開します。

Livewireのページネーションビューをresources/views/vendor/livewireに公開するには、以下のArtisanコマンドを使用します。

php artisan livewire:publish --pagination

{note} 残念ながらLivewireは、Paginator::defaultView()を使用してサービスプロバイダー内で定義したカスタムビューを上書きします。

どのメソッドを使用する場合も、ペジネーションコンポーネントでアンカータグの代わりに、次のメソッドで wire:clickハンドラーを使用する必要があります。

デフォルトのlivewireペジネタがどのように機能するかについては、以下の例を参考にしてください。

<div>
    @if ($paginator->hasPages())
        <nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between">
            <span>
                {{-- Previous Page Link --}}
                @if ($paginator->onFirstPage())
                    <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
                        {!! __('pagination.previous') !!}
                    </span>
                @else
                     <button wire:click="previousPage" wire:loading.attr="disabled" rel="prev" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                       {!! __('pagination.previous') !!}
                    </button>
                @endif
            </span>

            <span>
                {{-- Next Page Link --}}
                @if ($paginator->hasMorePages())
                    <button wire:click="nextPage" wire:loading.attr="disabled" rel="next" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                        {!! __('pagination.next') !!}
                    </button>
                @else
                    <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
                        {!! __('pagination.next') !!}
                    </span>
                @endif
            </span>
        </nav>
    @endif
</div>

ドキュメント章別ページ

概要
クイックスタート リファレンス 1.xからのアップグレード
基本
インストール コンポーネントの作成 コンポーネントのレンダー プロパティ アクション イベント ライフサイクルのフック コンポーネントのネスト
コンポーネントの機能
バリデーション ファイルアップロード ファイルダウンロード クエリ文字列 認可 ペジネーション リダイレクト フラッシュメッセージ トレイト
UIの詳細
ロード状況 ポーリング プリフェッチ オフライン状況 ダーティな状況 遅延ローディング
JSとの統合
AlpineJS Laravel Echo インラインスクリプト
その他
テスト セキュリティ トラブルシューティング パッケージ開発 Artisanコマンド

ヘッダー項目移動

注目：アイコン：ページ内リンク設置（リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

リンク
サイトホーム ページ上部へ
言語
バージョン
2.x

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

P／D／C

ページ（章）移動の左オフキャンバスオープン

H／A

ヘッダー移動モーダルオープン

M／S

移動／設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

N／J

次ヘッダー(H2〜H4)へ移動

B／K

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる