You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何减少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">&lsaquo;</span>
                </li>
            @else
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</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')">&rsaquo;</a>
                </li>
            @else
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                    <span class="page-link" aria-hidden="true">&rsaquo;</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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.01 00:48:10