如何减少Laravel分页中的可见按钮数量
Laravel分页优化:减少可见页码按钮数量
我想减少Laravel分页时的可见按钮数量,试过多种方法都没生效,包括设置$onEachSide=1也达不到预期效果。
当前分页样式

预期分页样式

当前分页代码
@if ($paginator->hasPages()) <nav> <ul class="pagination"> {{-- Previous Page Link --}} @if ($paginator->onFirstPage()) <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')"> <span class="page-link" aria-hidden="true">‹</span> </li> @else <li class="page-item"> <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@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" aria-label="@lang('pagination.next')">›</a> </li> @else <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> <span class="page-link" aria-hidden="true">›</span> </li> @endif </ul> </nav> @endif
解决方案
问题出在自定义分页视图的逻辑上:默认$onEachSide参数控制当前页两侧的页码数量,但你的视图直接遍历$elements数组,没有做针对性限制。以下两种方法可实现预期效果:
方法1:修改自定义视图逻辑
先在控制器分页时指定onEachSide:
// 控制器代码示例 $items = YourModel::paginate(10)->onEachSide(1);
然后替换视图中{{-- Pagination Elements --}}部分的代码为:
{{-- Pagination Elements --}} @php $currentPage = $paginator->currentPage(); $lastPage = $paginator->lastPage(); $onEachSide = $paginator->onEachSide(); $startPage = max(1, $currentPage - $onEachSide); $endPage = min($lastPage, $currentPage + $onEachSide); @endphp {{-- 首页按钮 --}} @if ($startPage > 1) <li class="page-item"> <a class="page-link" href="{{ $paginator->url(1) }}">1</a> </li> @if ($startPage > 2) <li class="page-item disabled" aria-disabled="true"><span class="page-link">...</span></li> @endif @endif {{-- 当前页前后的页码 --}} @for ($page = $startPage; $page <= $endPage; $page++) @if ($page == $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="{{ $paginator->url($page) }}">{{ $page }}</a></li> @endif @endfor {{-- 末页按钮 --}} @if ($endPage < $lastPage) @if ($endPage < $lastPage - 1) <li class="page-item disabled" aria-disabled="true"><span class="page-link">...</span></li> @endif <li class="page-item"> <a class="page-link" href="{{ $paginator->url($lastPage) }}">{{ $lastPage }}</a> </li> @endif
方法2:使用默认分页视图并全局配置
发布Laravel默认分页视图:
php artisan vendor:publish --tag=laravel-pagination
在config/pagination.php中设置全局默认值:
return [ // 其他配置... 'onEachSide' => 1, ];
默认视图会自动按照配置显示当前页前后各1个页码,加上首尾页和省略号,匹配预期样式。
内容的提问来源于stack exchange,提问作者Ivan Kachula
相关产品推荐
相关产品推荐

