Introduction

Ce tutoriel vous explique comment dessiner une pagination pour le résultat d'une recherche ou pour diviser une longue liste sur une de vos pages de votre site. C'est une question qui revient souvent dans nos courriels. Alors, j'ai décidé de vous expliquer comment avec quelques lignes de (X)HTML et de CSS afficher une superbe pagination.

L'article qui suit se veut une inspiration et une traduction pour nos lecteurs francophones de l'article publié par : Antonio Lupetti

Image non disponible

Nous allons voir 3 différentes paginations soit une pagination à la Digg-like, à la Flickr-like et une plus commune prête à être utilisée dans vos pages.

Structure d'une pagination

L'image suivante représente un exemple de la structure d'une pagination typique :

Image non disponible
En général, vous pouvez identifier les éléments suivants :
  • Bouton Précédent (désactivé) ;
  • Page active ;
  • Sélecteur ;
  • Bouton Suivant (activé).

Vous pouvez construire facilement cette structure à l'aide d'une liste (X)HTML <ul> et de quelques <li> pour chaque élément de la pagination. Voici donc les explications.

Pagination Flickr-like

Une pagination de type Flickr-like devrait ressembler à ce qui suit :

Image non disponible

Le code (X)HTML est très simple. Vous pouvez réutiliser cette structure dans tous les types de paginations. Il ne suffira que de modifier l'ID de la liste afin de modifier l'affichage de celle-ci grâce au CSS.

Code (X)HTML de la liste
Sélectionnez

<ul id="pagination-flickr">
    <li class="previous-off">« Précédent</li>
    <li class="active">1</li>
    <li><a href="/?page=2">2</a></li>
    <li><a href="/?page=3">3</a></li>
    <li><a href="/?page=4">4</a></li>
    <li><a href="/?page=5">5</a></li>
    <li><a href="/?page=6">6</a></li>
    <li><a href="/?page=7">7</a></li>
    <li class="next"><a href="/?page=2">Suivant »</a></li>
</ul>
			

Ne reste plus qu'à définir les éléments du CSS (ul, li, a).

Code CSS de la liste
Sélectionnez

ul{ border:0; margin:0; padding:0; }
 
#pagination-flickr li
{
    border:0; 
    margin:0; 
    padding:0;
    font-size:11px;
    list-style:none;
}
 
#pagination-flickr a
{
    border:solid 1px #DDDDDD;
    margin-right:2px;
}
 
#pagination-flickr .previous-off, #pagination-flickr .next-off 
{
    color:#666666;
    display:block;
    float:left;
    font-weight:bold;
    padding:3px 4px;
}
 
#pagination-flickr .next a, #pagination-flickr .previous a 
{
    font-weight:bold;
    border:solid 1px #FFFFFF;
}
 
#pagination-flickr .active
{
    color:#ff0084;
    font-weight:bold;
    display:block;
    float:left;
    padding:4px 6px;
}
 
#pagination-flickr a:link, #pagination-flickr a:visited 
{
    color:#0063e3;
    display:block;
    float:left;
    padding:3px 6px;
    text-decoration:none;
}
 
#pagination-flickr a:hover
{
    border:solid 1px #666666;
}
			

Pagination Digg-like

Maintenant, voici ce à quoi une pagination à la Digg-like devrait ressembler :

Image non disponible

Copier et coller la structure vue un peu plus haut, il suffit de changer l'ID « pagination-digg » à la place de « pagination-flickr » :

Code (X)HTML de la liste
Sélectionnez

<ul id="pagination-digg">
    <li class="previous-off">« Précédent</li>
    <li class="active">1</li>
    <li><a href="/?page=2">2</a></li>
    <li><a href="/?page=3">3</a></li>
    <li><a href="/?page=4">4</a></li>
    <li><a href="/?page=5">5</a></li>
    <li><a href="/?page=6">6</a></li>
    <li><a href="/?page=7">7</a></li>
    <li class="next"><a href="/?page=2">Suivant »</a></li>
</ul>
			
Code CSS de la liste
Sélectionnez

ul{ border:0; margin:0; padding:0; }
 
#pagination-digg li
{
    border:0; 
    margin:0; 
    padding:0;
    font-size:11px;
    list-style:none;
    margin-right:2px;
}
 
#pagination-digg a
{
    border:solid 1px #9aafe5
    margin-right:2px;
}
 
#pagination-digg .previous-off, #pagination-digg .next-off 
{
    border:solid 1px #DEDEDE
    color:#888888
    display:block;
    float:left;
    font-weight:bold;
    margin-right:2px;
    padding:3px 4px;
}
 
#pagination-digg .next a, #pagination-digg .previous a 
{
    font-weight:bold;
}
 
#pagination-digg .active
{
    background:#2e6ab1;
    color:#FFFFFF;
    font-weight:bold;
    display:block;
    float:left;
    padding:4px 6px;
}
 
#pagination-digg a:link, #pagination-digg a:visited 
{
    color:#0e509e
    display:block;
    float:left;
    padding:3px 6px;
    text-decoration:none;
}
 
#pagination-digg a:hover
{
    border:solid 1px #0e509e
}
			

Pagination Standard

Si vous êtes du type plus conventionnel, voici donc une pagination un peu plus commune et classique :

Image non disponible

Encore une fois, copier la structure que nous avons évoquée un peu plus haut et modifier encore une fois l'ID de la liste par « pagination-clean ».

Code (X)HTML de la liste
Sélectionnez

<ul id="pagination-clean">
    <li class="previous-off">« Précédent</li>
    <li class="active">1</li>
    <li><a href="/?page=2">2</a></li>
    <li><a href="/?page=3">3</a></li>
    <li><a href="/?page=4">4</a></li>
    <li><a href="/?page=5">5</a></li>
    <li><a href="/?page=6">6</a></li>
    <li><a href="/?page=7">7</a></li>
    <li class="next"><a href="/?page=2">Suivant »</a></li>
</ul>
			
Code CSS de la liste
Sélectionnez

ul{ border:0; margin:0; padding:0; }
 
#pagination-clean li
{
    border:0; 
    margin:0; 
    padding:0;
    font-size:11px;
    list-style:none;
}
 
#pagination-clean li, #pagination-clean a
{
    border:solid 1px #DEDEDE
    margin-right:2px;
}
 
#pagination-clean .previous-off, #pagination-clean .next-off 
{
    color:#888888
    display:block;
    float:left;
    font-weight:bold;
    padding:3px 4px;
}
 
#pagination-clean .next a, #pagination-clean .previous a 
{
    font-weight:bold;
    border:solid 1px #FFFFFF;
}
 
#pagination-clean .active
{
    color:#00000
    font-weight:bold;
    display:block;
    float:left;
    padding:4px 6px;
}
 
#pagination-clean a:link, #pagination-clean a:visited 
{
    color:#0033CC
    display:block;
    float:left;
    padding:3px 6px;
    text-decoration:none;
}
 
#pagination-clean a:hover
{
    text-decoration:none;
}
			

Remerciements

Tous mes remerciements à julp pour sa relecture.