Laravel允许自定义分页视图以匹配UI风格,通过创建resources/views/vendor/pagination/custom.blade.php文件并使用$users->links('vendor.pagination.custom')调用即可替换默认模板,结合Tailwind等框架需调整类名并保留可访问性属性。

在Laravel中,分页功能默认提供了简洁的渲染方式,但实际开发中往往需要自定义分页视图以匹配项目UI风格。Laravel允许开发者轻松替换默认的分页模板,实现样式和结构的完全控制。
使用自定义分页视图
Laravel的分页器通过 render() 方法生成HTML,若使用了Bootstrap,默认会输出Bootstrap样式的分页标签。要使用自定义视图,可通过以下步骤实现:
- 创建自定义分页视图文件,例如:resources/views/vendor/pagination/custom.blade.php
- 复制Laravel默认分页模板结构,或从头编写你想要的HTML结构
- 在Blade模板中调用分页时,指定使用该视图:
{!! $users->links('vendor.pagination.custom') !!}
常见自定义结构示例
以下是一个简化版的自定义分页模板示例,适用于现代UI框架:
<div class="pagination-wrapper"><ul class="custom-pagination">
@if ($paginator->onFirstPage())
<li class="disabled"><span>« 上一页</span></li>
@else
<li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">« 上一页</a></li>
@endif
@foreach ($elements as $element)
@if (is_string($element))
<li class="disabled"><span>{{ $element }}</span></li>
@endif
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="active"><span>{{ $page }}</span></li>
@else
<li><a href="{{ $url }}">{{ $page }}</a></li>
@endif
@endforeach
@endif
@endforeach
@if ($paginator->hasMorePages())
<li><a href="{{ $paginator->nextPageUrl() }}" rel="next">下一页 »</a></li>
@else
<li class="disabled"><span>下一页 »</span></li>
@endif
</ul>
</div>
集成Tailwind或Element UI风格
如果你使用的是Tailwind CSS或类似无样式框架,可去除Bootstrap类名,添加对应类:
- 将 page-item 和 page-link 替换为Tailwind的 flex items-center px-3 py-1 border rounded 等实用类
- 为当前页添加 bg-blue-500 text-white 高亮样式
- 禁用状态使用 opacity-50 cursor-not-allowed
基本上就这些。只要理解Laravel分页传入模板的数据结构($paginator、$elements、onFirstPage等),就能自由设计任意样式。运行 php artisan vendor:publish --tag=laravel-pagination 可快速导出默认视图进行修改,是最快上手的方式。不复杂但容易忽略细节,比如rel属性和aria标签的可访问性支持。










