分页

Livewire 提供了在组件内分页的功能。 此功能与 Laravel 的本机分页功能挂钩，因此对您来说应该感觉像是不可见的功能。

分页数据

假设您有一个显示帖子的组件，但您希望将结果限制为每页10个帖子。

您可以使用 Livewire 提供的 WithPagination trait 对结果进行分页。

app/Http/Livewire/ShowPosts.php

use Livewire\Component;
use Livewire\WithPagination;

class ShowPosts extends Component
{
    use WithPagination;

    public function render()
    {
        return view('livewire.show-posts', [
            'posts' => Post::paginate(10),
        ]);
    }
}

resources/views/livewire/show-posts.blade.php

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

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

现在，您的文章底部将为不同页面提供呈现的HTML链接，并对结果进行分页。

过滤数据后重设分页

过滤分页结果集时的常见模式是在应用过滤时将当前页面重置为第一页。

例如，如果用户访问数据集的页面“ 4”，然后键入搜索字段以缩小结果范围，通常希望将页面重置为“ 1”。

Livewire的 WithPagination 公开了一个 -> resetPage（）方法来完成此任务。

此方法可以与 updating/updated 生命周期挂钩结合使用，以在更新某些组件数据时重置页面。

app/Http/Livewire/ShowPosts.php

use Livewire\Component;
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),
        ]);
    }
}

使用自定义分页视图

Livewire 提供了两种方法来自定义分页链接的 Blade 视图，该视图在调用$results->links() 时呈现。

方法 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';
    }

    ...
}

不幸的是，Livewire 会使用以下内容覆盖您在服务提供商内部定义的自定义视图：Paginator :: defaultView（）。

使用任何一种方法时，都应在以下方法中使用wire:click处理程序，而不要使用分页组件中的定位标记：

• nextPage 跳转到下一页
• previousPage 跳转到上一页
• gotoPage($page) 跳转到指定页

请参阅下面的示例，了解默认带分页的工作方式。

@if ($paginator->hasPages())
    <ul class="pagination" role="navigation">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                <span class="page-link" aria-hidden="true">
                    <span class="d-none d-md-block">&lsaquo;</span>
                    <span class="d-block d-md-none">@lang('pagination.previous')</span>
                </span>
            </li>
        @else
            <li class="page-item">
                <button type="button" class="page-link" wire:click="previousPage" rel="prev" aria-label="@lang('pagination.previous')">
                    <span class="d-none d-md-block">&lsaquo;</span>
                    <span class="d-block d-md-none">@lang('pagination.previous')</span>
                </button>
            </li>
        @endif

        {{-- Pagination Elements --}}
        @foreach ($elements as $element)
            {{-- "Three Dots" Separator --}}
            @if (is_string($element))
                <li class="page-item disabled d-none d-md-block" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
            @endif

            {{-- Array Of Links --}}
            @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $paginator->currentPage())
                        <li class="page-item active d-none d-md-block" aria-current="page"><span class="page-link">{{ $page }}</span></li>
                    @else
                        <li class="page-item d-none d-md-block"><button type="button" class="page-link" wire:click="gotoPage({{ $page }})">{{ $page }}</button></li>
                    @endif
                @endforeach
            @endif
        @endforeach

        {{-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            <li class="page-item">
                <button type="button" class="page-link" wire:click="nextPage" rel="next" aria-label="@lang('pagination.next')">
                    <span class="d-block d-md-none">@lang('pagination.next')</span>
                    <span class="d-none d-md-block">&rsaquo;</span>
                </button>
            </li>
        @else
            <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                <span class="page-link" aria-hidden="true">
                    <span class="d-block d-md-none">@lang('pagination.next')</span>
                    <span class="d-none d-md-block">&rsaquo;</span>
                </span>
            </li>
        @endif
    </ul>
@endif