本文目录导读：
- 使用 Bootstrap 样式（默认）
- 自定义视图文件
- 在控制器中指定视图
- 使用 Tailwind CSS 样式
- 使用单纯的分页（仅显示上一页/下一页）
- 使用 CSS 定制样式
- 使用 Composer 包
- 最佳实践建议
在 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
最佳实践建议
- 基本需求：使用 Bootstrap 默认样式即可
- 定制需求：发布视图文件后修改
- 不同页面不同样式：在控制器中指定不同的视图
- 全局统一风格：在
AppServiceProvider中设置默认视图
选择最适合你项目需求的方法,最简单的方式是直接在 Blade 视图中使用 {{ $items->links() }}，然后通过 CSS 定制样式。
