减少Laravel默认分页器模板中的链接数量
laravel自带的分页链接太长怎么解决:
翻译于https://joelennon.com/reducing-the-number-of-links-in-laravels-default-paginator-template
Laravel的分页功能使分页数据库查询非常简单,并为用户提供在结果页面之间导航的链接。默认情况下,这些链接使用标准Bootstrap类进行样式设置。如果要更改用于分页链接的模板,可以运行以下artisan命令:
php artisan vendor:publish --tag=laravel-pagination
这将vendor在您的views文件夹中创建一个新的子目录,在这里您将找到标准的分页视图pagination/default.blade.php。
这很棒,但默认情况下,当您有大量页面时,Laravel将在页面之间插入三个点(…)。这比为每个页面打印链接要好得多,但显示的链接数量仍然很高,并且通常仍然会导致移动设备上的包装。
乍一看,自定义这看起来很困难,因为分页模板循环在一个$elements
定义的数组中Illuminate\Pagination\LengthAwarePaginator
。这使用一个命名的类Illuminate\Pagination\UrlWindow
来构造链接数组和适当的三个点项。虽然get这里使用的方法有一个参数onEachSide
,可以允许你配置显示点的任意一侧的链接数量,但是没有直接的方法可以在不创建自己的分页类的情况下挂钩。
幸运的是,如果您足够高兴地为分页模板添加一些逻辑以确定何时显示三个点,则可以回避这样做。下面的代码将显示当前页面两侧不超过2页,并将显示三个点以及第一页和最后一页链接。我已经将一个hidden-xs
类应用于三个点和第一页/最后一页链接,以确保分页链接尽可能在移动设备上显示在一行上。
@if ($paginator->hasPages())
<ul class="pagination pagination">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li class="disabled"><span>«</span></li>
@else
<li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">«</a></li>
@endif
@if($paginator->currentPage() > 3)
<li class="hidden-xs"><a href="{{ $paginator->url(1) }}">1</a></li>
@endif
@if($paginator->currentPage() > 4)
<li class="disabled hidden-xs"><span>...</span></li>
@endif
@foreach(range(1, $paginator->lastPage()) as $i)
@if($i >= $paginator->currentPage() - 2 && $i <= $paginator->currentPage() + 2)
@if ($i == $paginator->currentPage())
<li class="active"><span>{{ $i }}</span></li>
@else
<li><a href="{{ $paginator->url($i) }}">{{ $i }}</a></li>
@endif
@endif
@endforeach
@if($paginator->currentPage() < $paginator->lastPage() - 3)
<li class="disabled hidden-xs"><span>...</span></li>
@endif
@if($paginator->currentPage() < $paginator->lastPage() - 2)
<li class="hidden-xs"><a href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a></li>
@endif
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li><a href="{{ $paginator->nextPageUrl() }}" rel="next">»</a></li>
@else
<li class="disabled"><span>»</span></li>
@endif
</ul>
@endif
请注意,如果您有数百个页面并且需要支持宽度较窄的移动设备(例如iPhone 5S或更低版本),您可能需要在主页上添加一个pagination-sm
类<div>
以避免换行。或者,您可以在移动设备上显示上一页,下一页和当前页面链接。
解决后的结果: