Livewire 2.x ペジネーション

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

ペジネーションデータ

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

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),
        ]);
    }
}

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

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

class ShowPosts extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

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

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

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

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

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

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

class ShowPosts extends Component
{
    use WithPagination;

    ...

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

    ...
}

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

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

php artisan livewire:publish --pagination

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

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

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

@if ($paginator->hasPages())
    <nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between">
        {{-- 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
            <a href="{{ $paginator->previousPageUrl() }}" 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') !!}
            </a>
        @endif

        {{-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            <a href="{{ $paginator->nextPageUrl() }}" 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') !!}
            </a>
        @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
    </nav>
@endif

ドキュメント章別ページ

ヘッダー項目移動

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

移動

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

言語
バージョン

設定

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

カラーテーマ
和文指定 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によるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

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

オープン操作

PDC

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

HA

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

MS

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

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

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

BK

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

その他

?

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