减少Laravel默认分页器模板中的链接数量

减少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>&laquo;</span></li>
        @else
            <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">&laquo;</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">&raquo;</a></li>
        @else
            <li class="disabled"><span>&raquo;</span></li>
        @endif
    </ul>
@endif

请注意,如果您有数百个页面并且需要支持宽度较窄的移动设备(例如iPhone 5S或更低版本),您可能需要在主页上添加一个pagination-sm<div>以避免换行。或者,您可以在移动设备上显示上一页,下一页和当前页面链接。

解决后的结果:
缩短的分页链接

猜你喜欢

转载自blog.csdn.net/qq_34804120/article/details/88603876