PHP项目Laravel分页器样式如何定制

本文目录导读：

1. 使用 Bootstrap 样式（默认）
2. 自定义视图文件
3. 在控制器中指定视图
4. 使用 Tailwind CSS 样式
5. 使用单纯的分页（仅显示上一页/下一页）
6. 使用 CSS 定制样式
7. 使用 Composer 包
8. 最佳实践建议

在 Laravel 中定制分页器样式有几种方法，我来详细介绍最常用的几种：

使用 Bootstrap 样式（默认）

Laravel 默认支持 Bootstrap 4/5 风格的分页，如果你使用 Bootstrap，通常不需要额外配置：

{{ $users->links() }}

自定义视图文件

发布分页视图

php artisan vendor:publish --tag=laravel-pagination

这会在 resources/views/vendor/pagination/ 目录生成分页模板文件。

直接覆盖默认视图

创建 resources/views/vendor/pagination/custom.blade.php：

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination custom-pagination">
            {{-- 上一页 --}}
            @if ($paginator->onFirstPage())
                <li class="page-item disabled">
                    <span class="page-link">‹</span>
                </li>
            @else
                <li class="page-item">
                    <a href="{{ $paginator->previousPageUrl() }}" class="page-link">‹</a>
                </li>
            @endif
            {{-- 页码 --}}
            @foreach ($elements as $element)
                @if (is_string($element))
                    <li class="page-item disabled">
                        <span class="page-link">{{ $element }}</span>
                    </li>
                @endif
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li class="page-item active">
                                <span class="page-link">{{ $page }}</span>
                            </li>
                        @else
                            <li class="page-item">
                                <a href="{{ $url }}" class="page-link">{{ $page }}</a>
                            </li>
                        @endif
                    @endforeach
                @endif
            @endforeach
            {{-- 下一页 --}}
            @if ($paginator->hasMorePages())
                <li class="page-item">
                    <a href="{{ $paginator->nextPageUrl() }}" class="page-link">›</a>
                </li>
            @else
                <li class="page-item disabled">
                    <span class="page-link">›</span>
                </li>
            @endif
        </ul>
    </nav>
@endif

在控制器中指定视图

use Illuminate\Pagination\Paginator;
// 在控制器方法中
$users = User::paginate(10);
// 返回视图时指定自定义分页视图
return view('users.index', [
    'users' => $users,
    'paginator' => $users->links('vendor.pagination.custom')
]);

或者在模型中全局设置：

// AppServiceProvider 中
use Illuminate\Pagination\Paginator;
public function boot()
{
    Paginator::defaultView('vendor.pagination.custom');
    Paginator::defaultSimpleView('vendor.pagination.simple-custom');
}

使用 Tailwind CSS 样式

@if ($paginator->hasPages())
    <nav class="flex items-center justify-between mt-4">
        <div class="flex flex-1 justify-between sm:hidden">
            @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 rounded-md">
                    上一页
                </span>
            @else
                <a href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                    上一页
                </a>
            @endif
            @if ($paginator->hasMorePages())
                <a href="{{ $paginator->nextPageUrl() }}" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                    下一页
                </a>
            @else
                <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-md">
                    下一页
                </span>
            @endif
        </div>
        <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
            <div>
                <p class="text-sm text-gray-700">
                    显示第 <span class="font-medium">{{ $paginator->firstItem() }}</span>
                    到 <span class="font-medium">{{ $paginator->lastItem() }}</span>
                    条，共 <span class="font-medium">{{ $paginator->total() }}</span> 条
                </p>
            </div>
            <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                    @foreach ($elements as $element)
                        @if (is_string($element))
                            <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300">
                                {{ $element }}
                            </span>
                        @endif
                        @if (is_array($element))
                            @foreach ($element as $page => $url)
                                @if ($page == $paginator->currentPage())
                                    <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600">
                                        {{ $page }}
                                    </span>
                                @else
                                    <a href="{{ $url }}" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50">
                                        {{ $page }}
                                    </a>
                                @endif
                            @endforeach
                        @endif
                    @endforeach
                </nav>
            </div>
        </div>
    </nav>
@endif

使用单纯的分页（仅显示上一页/下一页）

{{ $users->simpleLinks() }}

或者自定义视图：

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
            @if ($paginator->onFirstPage())
                <li class="disabled"><span>←</span></li>
            @else
                <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">←</a></li>
            @endif
            @if ($paginator->hasMorePages())
                <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">→</a></li>
            @else
                <li class="disabled"><span>→</span></li>
            @endif
        </ul>
    </nav>
@endif

使用 CSS 定制样式

在 CSS 文件中添加自定义样式：

/* 自定义分页样式 */
.pagination {
    display: flex;
    list-style: none;
    gap: 8px;
}
.pagination .page-item .page-link {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s;
}
.pagination .page-item .page-link:hover {
    background: #f0f0f0;
}
.pagination .page-item.active .page-link {
    background: #007bff;
    color: white;
    border-color: #007bff;
}
.pagination .page-item.disabled .page-link {
    opacity: 0.5;
    pointer-events: none;
}

使用 Composer 包

安装社区风格包,如：

composer require mckenziearts/laravel-livewire-pagination

最佳实践建议

1. 基本需求：使用 Bootstrap 默认样式即可
2. 定制需求：发布视图文件后修改
3. 不同页面不同样式：在控制器中指定不同的视图
4. 全局统一风格：在 AppServiceProvider 中设置默认视图

选择最适合你项目需求的方法,最简单的方式是直接在 Blade 视图中使用 {{ $items->links() }}，然后通过 CSS 定制样式。