Pagination Blade 组件

#概述

该分页组件只可用在 Livewire Blade 视图中。它可以渲染一个分页链接列表：

use App\Models\User;
use Illuminate\Contracts\View\View;
use Livewire\Component;
 
class ListUsers extends Component
{
    // ...
    
    public function render(): View
    {
        return view('livewire.list-users', [
            'users' => User::query()->paginate(10),
        ]);
    }
}
use App\Models\User;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class ListUsers extends Component
{
    // ...
    
    public function render(): View
    {
        return view('livewire.list-users', [
            'users' => User::query()->paginate(10),
        ]);
    }
}

<x-filament::pagination :paginator="$users" />
<x-filament::pagination :paginator="$users" />

此外，你也可以使用简单分页或者 cursor 分页，这只会渲染"上一页"及"下一页"按钮：

use App\Models\User;
 
User::query()->simplePaginate(10)
User::query()->cursorPaginate(10)
use App\Models\User;

User::query()->simplePaginate(10)
User::query()->cursorPaginate(10)

#允许用户自定义每页展示数量

传递一个选项数组到 page-options 属性，你可以允许用户自定义每页显示的数量。你必须同时定义一个 Livewire 属性，使之可以保存用户选中的选项：

use App\Models\User;
use Illuminate\Contracts\View\View;
use Livewire\Component;
 
class ListUsers extends Component
{
    public int | string $perPage = 10;
    
    // ...
    
    public function render(): View
    {
        return view('livewire.list-users', [
            'users' => User::query()->paginate($this->perPage),
        ]);
    }
}
use App\Models\User;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class ListUsers extends Component
{
    public int | string $perPage = 10;
    
    // ...
    
    public function render(): View
    {
        return view('livewire.list-users', [
            'users' => User::query()->paginate($this->perPage),
        ]);
    }
}

<x-filament::pagination
    :paginator="$users"
    :page-options="[5, 10, 20, 50, 100, 'all']"
    :current-page-option-property="perPage"
/>
<x-filament::pagination
    :paginator="$users"
    :page-options="[5, 10, 20, 50, 100, 'all']"
    :current-page-option-property="perPage"
/>

#显示第一页和最后一页的链接

传递 extreme-links 属性到组件中，可以添加第一页和最后一页的链接：

<x-filament::pagination
    :paginator="$users"
    extreme-links
/>
<x-filament::pagination
    :paginator="$users"
    extreme-links
/>

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion