Nombre limite de liens affichés avec la pagination Laravel
un moyen facile de limiter combien de liens sont affichés avec la pagination Laravels?
Actuellement, il affiche 13 liens au plus (Précédent, 1 2 3 4 5 7 8 .. 78 79 suivant)--1-->
C'est toutefois trop pour les appareils mobiles et devient une navigation à deux lignes... est-il possible de définir les liens, par exemple n'affiche que 10?
j'ai joué avec le présentateur de la pagination mais rien ne semblait fonctionner.
Merci
8 réponses
l'ancienne façon de définir un présentateur personnalisé ne fonctionne pas avec Laravel 5.3+, le nombre de liens affichés semble être codé en dur dans le $onEachSide
paramètre Illuminate/Pagination/UrlWindow::make()
:
public static function make(PaginatorContract $paginator, $onEachSide = 3)
j'ai fini par écrire ma propre fonction de rendu (), volant du code de 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();
}
}
nous utilisons des brindilles, donc j'ai enregistré ceci comme un filtre à brindilles, j'imagine que quelque chose de similaire pourrait être fait pour Blade.
j'avais créé un nouveau présentateur personnalisé pour ne montrer que 10 liens. Elle comporte trois étapes:
Créer votre propre présentateur
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();
}
}
}
créer votre propre vue de pagination (par exemple custom-paginator.php), place dans votre vues dossier
<ul class="pagination">
<?php echo with(new CustomPresenter($paginator))->render(); ?>
</ul>
mise à Jour de votre app / config.vue.php
'pagination' => 'custom-paginator',
en faisant les changements suivants, vous pourrez obtenir un paginateur de 10 liens.
Espérons que cela aide :D
je sais que c'est une vieille question mais il n'y a toujours aucun moyen de la régler en utilisant les paramètres des liens de fonction (). J'ai fait du jQuery code simple, peut-être que ça aidera quelqu'un. C'est beaucoup plus simple que la réponse de Zesky. Je ne veux pas dire mieux, juste de plus simple :)
JavaScript:
(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;
}
}
ce code ne rend visible que quelques éléments li. Actif, deux devant, deux après, précédent/suivant les flèches. Cela fait seulement 7 éléments visibles au maximum au lieu de 15.
ma table était trop étroite donc, j'ai décidé de montrer seulement le premier et le dernier li (Les flèches suivantes et arrière) de pagination avec jQuery filter(). Vous pouvez personnaliser davantage.
$('ul.pagination li').hide().filter(':lt(1), :nth-last-child(1)').show();
assurez-vous d'ajouter avant la fin de la balise body.
c'est une vieille question, mais j'ai juste pensé que je partagerais comment j'ai récemment réussi à réduire le nombre de liens de pagination dans un Laravel 5.2 application:
à l'Intérieur de votre ViewServiceProvider
:
\Illuminate\Pagination\AbstractPaginator::presenter(function($paginator) {
return new \App\Pagination\BootstrapPresenter($paginator);
});
App\Pagination\BootstrapPresenter.php
<?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);
}
}
:
À:
Créer un fichier par défaut.lame.php dans le nouveau dossier de pagination dans le dossier de vue avec le code ci-dessous. Cela signifie que vous avez le fichier de pagination principal avec notre nouveau fichier de pagination. Cela établira une certaine limite dans le lien de pagination.
@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
alors où vous voulez obtenir la pagination, vous devez appeler la fonction de pagination laravel avec ce paramètre de fichier de vue.
$data->links('pagination.default')
il y a plusieurs façons de procéder selon la façon dont vous voulez qu'il se comporte.
pour mes besoins, je voulais une solution rapide pour le raccourcir afin qu'il ne casse pas mes dispositions mobiles.
Laravel 5.3
Éditez ce fichier: (ou celui que vous utilisez dans vos appels paginator)
/vendor/pagination/bootstrap-4.blade.php
j'ajoute une ligne simple pour sortir de la boucle de rendu de lien après 2 liens.
{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="page-item active"><span class="page-link">{{ $page }}</span></li>
@else
<li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
{{--Add the line below to limit rendered links--}}
<?php if($loop->count > 2) break; ?>
@endif
@endforeach
@endif
c'est une question plus ancienne, mais aucune des réponses ici n'est à jour avec la dernière documentation Laravel. Pour les versions plus récentes de Laravel (Laravel 5.6+), il y a une solution un peu facile à ce problème, mais il faut publier les vues de pagination du vendeur, comme par Laravel Documentation. En supposant que vous n'avez pas déjà publié ou modifié la vue de pagination par défaut, la commande que vous lancez est:
php artisan vendor:publish --tag=laravel-pagination
une fois les vues publiées, vous trouverez bootstrap-4.lame.php dans le répertoire resources/views/vendor/pagination. Vous pouvez éditer ce fichier et faire apparaître les liens de pagination comme vous le souhaitez. Afin de réduire le nombre de liens affichés par défaut, j'ai simplement utilisé un petit peu de php inline pour définir un index et limiter le nombre de liens à afficher, comme indiqué ci-dessous:
{{-- 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
la plupart de ce code est dans la vue par défaut de la lame pour bootstrap-4.lame.php, mais j'ai ajouté $index=0, $ index<4, $index++ code pour limiter le nombre de liens sur le côté gauche du paginateur à 4.
C'est la bonne façon de gérer ce problème selon la documentation de Laravel, sans éditer les fichiers du fournisseur composer, ou en essayant de hacker le système d'une autre manière. Je me rends compte que JR Lawhorne a posté une réponse similaire, mais elle n'inclut pas l'ensemble du processus de publication du fichier vendeur avant la publication. Espérons que cela aide les autres.