本文目录导读：
- 使用默认分页视图（最常用）
- 使用自定义视图名称
- 创建全新的分页视图
- 使用 Tailwind CSS 样式（Laravel 9+ 默认）
- 使用 Bootstrap 5 样式
- 在视图中指定自定义分页
- 全局更改默认分页视图
- 添加自定义CSS样式
- 使用 JavaScript 增强分页
- 推荐最佳实践
是的,Laravel的分页样式可以完全自定义，Laravel提供了灵活的分页定制方式，以下是几种常见的自定义方法：
使用默认分页视图（最常用）
发布分页视图到资源目录
php artisan vendor:publish --tag=laravel-pagination
这会在 resources/views/vendor/pagination/ 创建分页模板文件。
自定义分页模板
编辑 resources/views/vendor/pagination/bootstrap-4.blade.php（或其他模板）：
@if ($paginator->hasPages())
<nav>
<ul class="pagination custom-pagination">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li class="page-item disabled" aria-disabled="true">
<span class="page-link">@lang('pagination.previous')</span>
</li>
@else
<li class="page-item">
<a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a>
</li>
@endif
{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<li class="page-item disabled" 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" aria-current="page"><span class="page-link">{{ $page }}</span></li>
@else
<li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
@endif
@endforeach
@endif
@endforeach
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li class="page-item">
<a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a>
</li>
@else
<li class="page-item disabled" aria-disabled="true">
<span class="page-link">@lang('pagination.next')</span>
</li>
@endif
</ul>
</nav>
@endif
使用自定义视图名称
在控制器或视图中指定自定义视图：
// 在控制器中
$users = User::paginate(10);
$users->withPath('/custom/url');
$users->onEachSide(2); // 控制页码两侧显示数量
// 使用自定义模板
$users->links('vendor.pagination.custom-pagination');
创建全新的分页视图
在 resources/views/vendor/pagination/ 创建新文件，如 custom.blade.php：
@if ($paginator->hasPages())
<div class="flex items-center justify-between border-t border-gray-200 px-4 py-3 sm:px-6">
<div class="flex flex-1 justify-between sm:hidden">
@if ($paginator->onFirstPage())
<span class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700">Previous</span>
@else
<a href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Previous</a>
@endif
@if ($paginator->hasMorePages())
<a href="{{ $paginator->nextPageUrl() }}" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Next</a>
@else
<span class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700">Next</span>
@endif
</div>
</div>
@endif
使用 Tailwind CSS 样式（Laravel 9+ 默认）
@if ($paginator->hasPages())
<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
<div class="flex justify-between flex-1 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">
{!! __('pagination.previous') !!}
</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:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
{!! __('pagination.previous') !!}
</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:text-gray-500 focus:outline-none focus:ring ring-gray-300 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 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-md">
{!! __('pagination.next') !!}
</span>
@endif
</div>
</nav>
@endif
使用 Bootstrap 5 样式
@if ($paginator->hasPages())
<nav>
<ul class="pagination pagination-lg justify-content-center">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li class="page-item disabled">
<span class="page-link">«</span>
</li>
@else
<li class="page-item">
<a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">«</a>
</li>
@endif
{{-- Pagination Elements --}}
@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 class="page-link" href="{{ $url }}">{{ $page }}</a></li>
@endif
@endforeach
@endif
@endforeach
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li class="page-item">
<a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">»</a>
</li>
@else
<li class="page-item disabled">
<span class="page-link">»</span>
</li>
@endif
</ul>
</nav>
@endif
在视图中指定自定义分页
{{ $users->links('vendor.pagination.custom') }}
{{-- 或者使用Bootstrap 4 --}}
{{ $users->links('pagination::bootstrap-4') }}
{{-- 或者使用Bootstrap 5 --}}
{{ $users->links('pagination::bootstrap-5') }}
{{-- 或者使用Tailwind --}}
{{ $users->links('pagination::tailwind') }}
全局更改默认分页视图
在 AppServiceProvider 中设置：
use Illuminate\Pagination\Paginator;
public function boot()
{
Paginator::defaultView('vendor.pagination.custom');
Paginator::defaultSimpleView('vendor.pagination.custom');
}
添加自定义CSS样式
.custom-pagination {
display: flex;
list-style: none;
padding: 0;
margin: 20px 0;
}
.custom-pagination li {
margin: 0 5px;
}
.custom-pagination li a,
.custom-pagination li span {
display: block;
padding: 8px 16px;
color: #333;
background-color: #fff;
border: 1px solid #ddd;
text-decoration: none;
border-radius: 4px;
}
.custom-pagination li.active span {
background-color: #007bff;
color: white;
border-color: #007bff;
}
.custom-pagination li.disabled span {
color: #6c757d;
pointer-events: none;
background-color: #fff;
border-color: #dee2e6;
}
使用 JavaScript 增强分页
// 添加平滑滚动效果
document.querySelectorAll('.pagination a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const url = this.getAttribute('href');
// 使用 AJAX 加载下一页内容
fetch(url)
.then(response => response.text())
.then(html => {
// 更新内容区域
document.getElementById('content-area').innerHTML = html;
// 滚动到顶部
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
});
推荐最佳实践
- 使用默认分页视图发布，然后修改模板
- 根据前端框架选择合适的样式（Bootstrap/Tailwind）
- 保持分页样式与整体设计一致
- 测试响应式设计，确保移动端正常工作
- 考虑使用 AJAX 分页提升用户体验
通过这些方法,你可以完全控制 Laravel 分页的外观和行为。
