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框架:
特色介绍: 1、ASP+XML+XSLT开发,代码、界面、样式全分离,可快速开发 2、支持语言包,支持多模板,ASP文件中无任何HTML or 中文 3、无限级分类,无限级菜单,自由排序 4、自定义版头(用于不规则页面) 5、自动查找无用的上传文件与空目录,并有回收站,可删除、还原、永久删除 6、增强的Cache管理,可单独管理单个Cache 7、以内存和XML做为Cache,兼顾性能与消耗 8、
- « 上一页
- « 上一页
- {{ $element }}
- {{ $page }}
- {{ $page }}
- 下一页 »
- 下一页 »
@if ($paginator->onFirstPage())
@else
@endif
@foreach ($elements as $element)
@if (is_string($element))
@endif
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
@else
@endif
@endforeach
@endif
@endforeach
@if ($paginator->hasMorePages())
@else
@endif
集成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标签的可访问性支持。









