Pagination avec symfony 3

Nous avons vu dans le dernier tutoriel comment générer les formulaires et les CRUDs pour chaque entité .La fonction qui permet de récupérer toute les lignes d'une table et de les afficher est générée lors de la génération des CRUDs , mais si on a déjà un nombre assez grands de lignes la page sera très encombrée du coups il faut partager ces lignes sur des pages d'où la nécessité d'un système de pagination.Le bundle KnpPaginator nous permet d'afficher les éléments récupérés sur des pages.Dans ce tutoriel nous allons installer KnpPaginatoBundle et l'utiliser pour afficher les réservations sur des pages numérotées. 

1-installation de KnpPaginator ave composer:

composer require knplabs/knp-paginator-bundle

2-Ajouter le KnpPaginatorBundle au  fichier AppKenrnel.php

// app/AppKernel.php
public function registerBundles()
{
    return array(
        // ...
        new Knp\Bundle\PaginatorBundle\KnpPaginatorBundle(),
        // ...
    );
}

3-Configuration

Vous pouvez personnaliser la configurarion selon vos besoins mais pour le moment nous utilisons cette configuration par défaut:

knp_paginator:
    page_range: 5                      
    default_options:
        page_name: page               
        sort_field_name: sort         
        sort_direction_name: direction
        distinct: true                
    template:
        pagination: 'KnpPaginatorBundle:Pagination:sliding.html.twig'    
        sortable: 'KnpPaginatorBundle:Pagination:sortable_link.html.twig' 

Si vous avez déja installé bootstrap modifiez la ligne:
 pagination: 'KnpPaginatorBundle:Pagination:sliding.html.twig'
par la ligne suivante:

pagination: 'KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig'

4-Exemple d'utilisation

On va utiliser la pagination pour afficher la liste de réservations pour cela vous devez tout d'abord  ajouter des réservations comme nous avons vu dans le dernier tutoriel pour les afficher ensuite.

ReservationController.php

<?php 
public function indexAction(Request $request)
    {
        $em = $this->getDoctrine()->getManager();

       $listeReservations = $em->getRepository('RestoBundle:Reservation')->findAll();
         $reservations  = $this->get('knp_paginator')->paginate(
        $listeReservations,
        $request->query->get('page', 1)/*le numéro de la page à afficher*/,
          6/*nbre d'éléments par page*/
    );
        return $this->render('reservation/index.html.twig', array(
          'reservations' => $reservations,));
    }

reservation/index.html.twig

    <h1>Les réservations</h1>
    <table class="table reservations">
        <thead>
            <tr>
                <th>Id</th>
                <th>Prenom</th>
                <th>Nom</th>
                <th>Date</th>
                <th>Heure</th>
                <th>Nb-personnes</th>
                <th>Telephone</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
        {% for reservation in reservations %}
            <tr>
                <td><a href="{{ path('reservation_show', { 'id': reservation.id }) }}">{{ reservation.id }}</a></td>
                <td>{{ reservation.prenom }}</td>
                <td>{{ reservation.nom }}</td>
                <td>{% if reservation.date %}{{ reservation.date|date('Y-m-d') }}{% endif %}</td>
                <td>{% if reservation.heure %}{{ reservation.heure|date('H:i') }}{% endif %}</td>
                <td>{{ reservation.nbPersonnes }}</td>
                <td>{{ reservation.telephone }}</td>
                <td>{{ reservation.email }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
        <div class="text-center">{{ knp_pagination_render(reservations) }}</div>

CSS

.reservations{
    background-color: #BF3E26;
    font-size: 13pt;
    margin-bottom: 50px;
}

.reservations a{
    color:#98fb98;
}
.reservations a:hover ,.reservations a:focus , .reservations a:visited{
    color:#98fb98;
}
.pagination > li > a,
.pagination > li > span{
    color: #BF3E26;

}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus{
    background-color: #98fb98;
    color:#BF3E26;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus{
    background-color: #1C8C42;
    color: #ffffff;
    border: 1px solid #dddddd;
}