目前最多显示13个链接(Prev, 1 2 3 4 5 7 8 .. 78 79 next)
然而,这对于移动设备来说太多了,导航变成了两行...有没有办法将链接设置为只显示10个?
我已经尝试过调整分页显示器,但似乎没有任何实际效果。
我使用CSS来限制允许的链接。非常简单... 可以扩展到显示任意数量的页面,在任意数量的断点处。
@media screen and ( max-width: 400px ){
li.page-item {
display: none;
}
.page-item:first-child,
.page-item:nth-child( 2 ),
.page-item:nth-last-child( 2 ),
.page-item:last-child,
.page-item.active,
.page-item.disabled {
display: block;
}
}
这种特定的实现允许箭头,'...',第一页,活动页和最后一页。
现在Laravel 5.7有一种新的分页方法,可以自定义分页器两侧的链接数量。由于这种新方法,某些情况下您不再需要自定义分页视图。以下是您可以使用的API来定义当前页面两侧的链接计数:
User::paginate(10)->onEachSide(2);
在你的控制器上编写该代码。
你可以在https://laravel-news.com/laravel-5-7-pagination-link-customizations上查看更多详细信息。
$blog = Blog::where('type', "news")->latest('created_at')->paginate(5)->onEachSide(1);
我使用了 onEachSide(1)。这使得链接保持在每个设备的宽度上。 - Raihanul Alam Hridoy$collection->render()
时,它对我无效,但是当我使用 $collection->onEachSide(1)->links()
时有效。 - dsturbid{{ $detail_data->onEachSide(3)->links() }}
,但它没有起作用。它显示超过15个页面链接按钮。请帮助我解决这个问题。我参考了 https://laravel.com/docs/8.x/pagination#adjusting-the-pagination-link-window 官方文档。 - Harsh Patel来自laravel 8文档。如果需要,您可以使用blade中的onEachSide
方法来控制在当前页面两侧显示多少个附加链接:
{{ $posts->onEachSide(1)->links() }}
适用于 Laravel 5.6 及以上版本:
发布供应商模板:
php artisan vendor:publish --tag=laravel-pagination
请按以下方式编辑bootstrap-4.blade.php
:
@if ($paginator->hasPages())
<ul class="pagination" role="navigation">
{{-- 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
<?php
$start = $paginator->currentPage() - 2; // show 3 pagination links before current
$end = $paginator->currentPage() + 2; // show 3 pagination links after current
if($start < 1) {
$start = 1; // reset start to 1
$end += 1;
}
if($end >= $paginator->lastPage() ) $end = $paginator->lastPage(); // reset end to last page
?>
@if($start > 1)
<li class="page-item">
<a class="page-link" href="{{ $paginator->url(1) }}">{{1}}</a>
</li>
@if($paginator->currentPage() != 4)
{{-- "Three Dots" Separator --}}
<li class="page-item disabled" aria-disabled="true"><span class="page-link">...</span></li>
@endif
@endif
@for ($i = $start; $i <= $end; $i++)
<li class="page-item {{ ($paginator->currentPage() == $i) ? ' active' : '' }}">
<a class="page-link" href="{{ $paginator->url($i) }}">{{$i}}</a>
</li>
@endfor
@if($end < $paginator->lastPage())
@if($paginator->currentPage() + 3 != $paginator->lastPage())
{{-- "Three Dots" Separator --}}
<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($paginator->lastPage()) }}">{{$paginator->lastPage()}}</a>
</li>
@endif
{{-- 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>
@endif
这个示例以正确的方式处理了新的CSS类、活动链接、三个点(正确地,而不是1..2 3 4)并且可定制(您想显示的页面数量)。
我创建了一个新的自定义 Presenter,仅显示 10 个链接。它包括以下 3 个步骤:
1. 创建您自己的自定义 Presenter
use Illuminate\Pagination\BootstrapPresenter;
class CustomPresenter extends BootstrapPresenter{
protected function getPageSlider()
{
// Changing the original value from 6 to 3 to reduce the link count
$window = 3;
// If the current page is very close to the beginning of the page range, we will
// just render the beginning of the page range, followed by the last 2 of the
// links in this list, since we will not have room to create a full slider.
if ($this->currentPage <= $window)
{
$ending = $this->getFinish();
return $this->getPageRange(1, $window + 2).$ending;
}
// If the current page is close to the ending of the page range we will just get
// this first couple pages, followed by a larger window of these ending pages
// since we're too close to the end of the list to create a full on slider.
elseif ($this->currentPage >= $this->lastPage - $window)
{
$start = $this->lastPage - 8;
$content = $this->getPageRange($start, $this->lastPage);
return $this->getStart().$content;
}
// If we have enough room on both sides of the current page to build a slider we
// will surround it with both the beginning and ending caps, with this window
// of pages in the middle providing a Google style sliding paginator setup.
else
{
$content = $this->getAdjacentRange();
return $this->getStart().$content.$this->getFinish();
}
}
}
创建自己的分页视图(例如custom-paginator.php),将其放置在您的视图文件夹中
<ul class="pagination">
<?php echo with(new CustomPresenter($paginator))->render(); ?>
</ul>
请更新您的 app/config.view.php 文件。
'pagination' => 'custom-paginator',
@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><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><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
如果你想要分页,那么你需要调用Laravel的分页函数,并使用这个视图文件参数。
$data->links('pagination.default')
(function($) {
$('ul.pagination li.active')
.prev().addClass('show-mobile')
.prev().addClass('show-mobile');
$('ul.pagination li.active')
.next().addClass('show-mobile')
.next().addClass('show-mobile');
$('ul.pagination')
.find('li:first-child, li:last-child, li.active')
.addClass('show-mobile');
})(jQuery);
CSS:
@media (max-width: /* write what you need, for me it's 560px */) {
ul.pagination li:not(.show-mobile) {
display: none;
}
}
在 Laravel 5.3+ 中,旧的自定义 presenter 定义方式已经不再适用。现在,Illuminate/Pagination/UrlWindow::make()
方法中的 $onEachSide
参数似乎是硬编码了要显示的链接数:
public static function make(PaginatorContract $paginator, $onEachSide = 3)
最终我只是写了自己的render()函数,从LengthAwarePaginator中借鉴了一些代码。
/**
* Stole come code from LengthAwarePaginator::render() and ::elements() to allow for a smaller UrlWindow
*
* @param LengthAwarePaginator $paginator
* @param int $onEachSide
* @return string
*/
public static function render(LengthAwarePaginator $paginator, $onEachSide = 2)
{
$window = UrlWindow::make($paginator, $onEachSide);
$elements = array_filter([
$window['first'],
is_array($window['slider']) ? '...' : null,
$window['slider'],
is_array($window['last']) ? '...' : null,
$window['last'],
]);
return LengthAwarePaginator::viewFactory()->make(LengthAwarePaginator::$defaultView, [
'paginator' => $paginator,
'elements' => $elements,
])->render();
}
}
5.6
中,默认变量$onEachSide = 3
位于Illuminate\Pagination\UrlWindow::get($onEachSide = 3){ // }
。它也可以在Illuminate\Pagination\LengthAwarePaginator::elements()
函数中设置,在该函数中调用为$window = UrlWindow::make($this);
,只需像这样传递第二个变量$window = UrlWindow::make($this, 1);
。 - Matthew Mathieson这是一个老问题,但我想分享一下我最近如何在Laravel 5.2应用程序中减少分页链接数量的方法:
在你的ViewServiceProvider
中:
\Illuminate\Pagination\AbstractPaginator::presenter(function($paginator) {
return new \App\Pagination\BootstrapPresenter($paginator);
});
<?php namespace App\Pagination;
use Illuminate\Pagination\UrlWindow;
use Illuminate\Contracts\Pagination\Paginator as PaginatorContract;
use Illuminate\Pagination\BootstrapThreePresenter as LaravelBootstrapThreePresenter;
class BootstrapPresenter extends LaravelBootstrapThreePresenter
{
/**
* Create a new Bootstrap presenter instance.
*
* @param \Illuminate\Contracts\Pagination\Paginator $paginator
* @param \Illuminate\Pagination\UrlWindow|null $window
* @return void
*/
public function __construct(PaginatorContract $paginator, UrlWindow $window = null)
{
$this->paginator = $paginator;
// Make the pagination window smaller (default is 3).
$this->window = UrlWindow::make($paginator, 1);
}
}
来自:
致:
php artisan vendor:publish --tag=laravel-pagination
{{-- Array Of Links --}}
@if (is_array($element))
<?php $index = 0; ?>
@foreach ($element as $page => $url)
@if($index<4)
@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
@endif
<?php $index++ ?>
@endforeach
@endif