Symfony 4 - Créer un blog pas à pas - Mettre en place la pagination

11 août 2019 - : MVC Tutoriel Symfony - : 2 commentaires - : 672 - Tutoriel Framework MVC Views Symfony Pagination

Visualisez les fichiers de cette série sur GitHub

Dans l'article précédent, nous avons affiché les articles sur la page actualités sans nous soucier de la pagination.

Cette pagination pourraît s'effectuer manuellement en calculant le nombre de pages, l'offset et en passant en paramètre le numéro de la page actuelle.

Avec Symfony, il existe une solution plus simple sous la forme d'un bundle publié par KNP Labs et appelé KNP Paginator Bundle.

Sa mise en oeuvre est simple et permet de mettre en place une pagination gérée depuis le contrôleur et affichée dans la vue.

Nous allons prendre pour exemple la page contenant la liste des articles créée dans l'article précédent.

Nous allons créer des pages de 6 articles.

Installation de KNP Paginator

Afin d'intégrer KNP Paginator à notre projet, nous allons faire appel à composer au moyen de la commande suivante

composer require knplabs/knp-paginator-bundle

Et c'est tout, le bundle est installé.

Activation de la pagination dans le contrôleur

Pour activer la pagination dans le contrôleur, il est nécessaire de comprendre le concept de KNP Paginator.

Il nécessite dans un premier temps de récupérer toutes les données devant être paginées. Dans notre exemple, il s'agit de tous les articles.

KNP Paginator se chargera de "filtrer" cette liste et de conserver uniquement les données correspondant à la page courante.

Nous utiliserons la méthode "paginate" qui se chargera de tout ça.

Cette méthode prend 3 paramètres comme dans l'exemple ci-dessous.

$articles = $paginator->paginate(
    $donnees, // Requête contenant les données à paginer (ici nos articles)
    $request->query->getInt('page', 1), // Numéro de la page en cours, passé dans l'URL, 1 si aucune page
    6 // Nombre de résultats par page
);

Nous devrons donc modifier notre contrôleur "ArticlesController" comme dans cet exemple

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use App\Entity\Articles;
use Symfony\Component\HttpFoundation\Request; // Nous avons besoin d'accéder à la requête pour obtenir le numéro de page
use Knp\Component\Pager\PaginatorInterface; // Nous appelons le bundle KNP Paginator

class ArticlesController extends AbstractController
{
    /**
     * @Route("/articles", name="articles")
     */
    public function index(Request $request, PaginatorInterface $paginator) // Nous ajoutons les paramètres requis
    {
        // Méthode findBy qui permet de récupérer les données avec des critères de filtre et de tri
        $donnees = $this->getDoctrine()->getRepository(Articles::class)->findBy([],['created_at' => 'desc']);

        $articles = $paginator->paginate(
            $donnees, // Requête contenant les données à paginer (ici nos articles)
            $request->query->getInt('page', 1), // Numéro de la page en cours, passé dans l'URL, 1 si aucune page
            6 // Nombre de résultats par page
        );
        
        return $this->render('articles/index.html.twig', [
            'articles' => $articles,
        ]);
    }
}

Affichage de la pagination dans la vue

Une fois les données envoyées à la vue, nous pouvons y afficher le sélecteur de pages au moyen de la méthode "knp_pagination_render" comme dans le code ci-dessous, dans le fichier "index.html.twig" du dossier "articles"

{% extends 'base.html.twig' %}

{% block title %}Liste des articles{% endblock %}

{% block body %}
    <h1>Liste des articles</h1>
    {% for article in articles %}
        <h2>{{ article.titre }}</h2>
        <div>{{ article.contenu }}</div>
    {% endfor %}
    {{ knp_pagination_render(articles) }}
{% endblock %}

Et voilà comment ajouter une pagination.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder aux forums de Nouvelle-Techno.fr ou au serveur Discord pour une entraide par chat

Visualisez les fichiers de cette série sur GitHub

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Ecrire un commentaire

Nouvelle-Techno.fr a écrit le 18 septembre 2019 à 06:04

Bonjour,

Il y a une erreur sur cette ligne

// Votre ligne
$request->query->getInt('page, 1')

// Ce qu'il faut écrire 
$request->query->getInt('page', 1)

 

Répondre

Exi a écrit le 18 septembre 2019 à 01:32

Bonjour à vous,

J'ai testé votre méthode pour la pagination mais j'ai un problème ici :

<pre><code>

$articles = $paginator->paginate(
    $donnees, // Les données à paginer
    $request->query->getInt('page, 1'), // Numéro de la page en cours passée dans l'URL, 1 si aucune page
    6 // Nombre de résultats par page
);</code></pre>

Cela m'affiche l'erreur : 

Invalid item per page number. Limit: 6 and Page: 0, must be positive non-zero integers

En vous remerciant d'avance ! 

Répondre

Ecrire un commentaire