Pagination d'un tableau avec Mootools

Nous allons voir comment mettre en place rapidement un système de pagination pour les tableaux réutilisable et non intrusif avec le framework Javascript Mootools.

Prérequis

Pour pouvoir mettre en place la pagination du tableau, nous utiliserons la librairie MooTools que vous pouvez télécharger sur le site officiel https://mootools.net/. Cet article a été écrit en utilisant la version 1.6.0 de MooTools.

Création de la classe Pagination

Nous allons créer une classe qui va nous permettre de manipuler un tableau afin de gérer la pagination. Pour cela, nous utilisons la syntaxe que MooTools a mise à notre disposition.

Tout d’abord, créons le gabarit de la classe dans le fichier /js/pagination.js :

var Pagination = new Class({
  // Le contenu de notre classe
});

Le but de cet article n’étant pas de décrire le fonctionnement de MooTools pour créer des classes, vous pouvez vous reporter à la documentation du site officiel : https://mootools.net/core/docs/1.6.0/Class/Class.

Mise en place du constructeur

Maintenant, il faut définir le constructeur afin de pouvoir utiliser notre classe :

var Pagination = new Class({
  options: {
    currentPage: 0,
    lines: 5
  },

  initialize: function(table, options) {
    this.table = table;
    this.setOptions(options);
  }
});

Pagination.implement(new Options);

Attardons-nous un moment sur ces nouvelles informations.

Dans options, nous définissons 2 valeurs :

• currentPage : le numéro de la page affichée à l’écran ; par défaut, elle vaut 0 (la première page)
• lines : le nombre de lignes affichées dans une page ; par défaut, 5 lignes par page

Dans la méthode initialize (le constructeur), nous récupérons 2 paramètres :

• table : la table HTML pour lequel nous mettons en place la pagination
• options : des options supplémentaires que nous souhaitons renseigner, comme le nombre de ligne par page ou la page courante par défaut

Comme ci-dessus, nous ne nous attarderons pas sur la syntaxe de implement ; pour plus de détails, https://mootools.net/core/docs/1.6.0/Class/Class#Class:implement.

Initialisation et affichage

Nous allons maintenant créer 2 méthodes afin de

• initialiser et de calculer certaines valeurs que nous utiliserons dans notre code
• afficher / masquer les lignes du tableau

Initialisation des données

Lors de l’initialisation, nous stockons 2 informations importantes : les lignes du tableau et le nombre de pages maximum.

Ces informations sont calculées dans la méthode _init suivante :

_init: function() {
  this.rows = $ES('tbody tr', this.table);
  this.countPages = Math.ceil(this.rows.length / this.options.lines);
}

La première ligne permet de récupérer les lignes contenues dans le tableau.

La seconde calcule le nombre de pages maximum.

Affichage / masquage des lignes

Pour gérer l’affichage des lignes du tableau, nous créons une autre fonction :

_display: function() {
  this.rows.each(function(row, index) {
    if (index < this.options.lines * this.options.currentPage) {
      row.setStyle('display', 'none');
    } else if (index > this.options.lines * (this.options.currentPage + 1) - 1) {
      row.setStyle('display', 'none');
    } else {
      row.setStyle('display', 'table-row');
    }
  }.bind(this));
}

Cette fonction itère sur toutes les lignes du tableau et gère l’affichage / le masquage des lignes en fonction de la position de chacune dans le tableau : si la ligne fait partie de la page courante, elle est affichée (row.setStyle('display', 'table-row')), sinon elle est masquée (row.setStyle('display', 'none')).

Premiers appels

Maintenant que nos 2 méthodes sont définies, il faut les appeler dans le constructeur afin d’initialiser la pagination ; le constructeur devient :

initialize: function(table, options) {
  this.table = table;
  this.setOptions(options);

  this._init();
  this._display();
}

Navigation entre les pages

En l’état, il est possible d’utiliser notre classe de pagination, mais vous pouvez remarquer qu’il est encore impossible de naviguer entre les différentes pages. Nous allons donc écrire 5 nouvelles méthodes :

• goToPage : permet d’accéder directement à une page précise
• previousPage : va à la page précédente de la page courante
• nextPage : va à la page suivante de la page courante
• firstPage : va à la première page
• lastPage : va à la dernière page

Comme vous pouvez vous en douter, nous écrivons d’abord la méthode goToPage afin de la réutiliser dans les autres méthodes de navigation :

goToPage: function(page) {
  if (page < 0 || page > this.countPages - 1) return;

  this.options.currentPage = page;

  this._display();
}

Cette méthode prend en paramètre le numéro de la page vers laquelle il faut aller (n’oubliez pas que la numérotation commence à 0) ; elle vérifie que le paramètre est correct et affiche la page demandée.

Pour définir les 4 autres méthodes, il suffit d’appeler goToPage :

previousPage: function() {
  this.goToPage(this.options.currentPage - 1);
},

nextPage: function() {
  this.goToPage(this.options.currentPage + 1);
},

firstPage: function() {
  this.goToPage(0);
},

lastPage: function() {
  this.goToPage(this.countPages - 1);
}

Utilisation de la classe

Nous avons terminé l’écriture de la classe Pagination. Maintenant, il suffit de créer un objet de type Pagination et d’appeler les différentes méthodes que nous avons écrites.

Un petit exemple valant mieux qu’un long discours, voici comment utiliser notre classe.

Création du tableau HTML

Pour pouvoir réaliser la pagination, nous devons d’abord créer notre table en utilisant la balise <tbody> :

<table id="acteurs">
  <thead>
    <tr>
      <th>#</th>
      <th>Pr&eacute;nom</th>
      <th>Nom</th>
      <th>R&ocirc;le</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Kad</td>
      <td>Merad</td>
      <td>Philippe Abrams</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Dany</td>
      <td>Boon</td>
      <td>Antoine Bailleul</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Zo&eacute;</td>
      <td>F&eacute;lix</td>
      <td>Julie Abrams</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Philippe</td>
      <td>Duquesne</td>
      <td>Fabrice Canoli</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Line</td>
      <td>Renaud</td>
      <td>Madame Bailleul</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Michel</td>
      <td>Galabru</td>
      <td>Le grand oncle de Julie</td>
    </tr>
    <tr>
      <td>7</td>
      <td>St&eacute;phane</td>
      <td>Freiss</td>
      <td>Jean</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Guy</td>
      <td>Lecluyse</td>
      <td>Yann Vandernoout</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Anne</td>
      <td>Marivin</td>
      <td>Annabelle Deconninck</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Patrick</td>
      <td>Bosso</td>
      <td>Le gendarme</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Zinedine</td>
      <td>Soualem</td>
      <td>Momo</td>
    </tr>
    <tr>
      <td>12</td>
      <td>J&eacute;r&ocirc;me</td>
      <td>Commandeur</td>
      <td>Inspecteur Lebic</td>
    </tr>
  </tbody>
</table>

Nous ne nous attarderons pas sur la syntaxe de la table.

Nous allons maintenant ajouter des liens permettant de naviguer :

<div id="actions">
  <a href="#" id="premiere">Premi&eacute;re page</a>
  <a href="#" id="precedente">Page pr&eacute;c&eacute;dente</a>
  <a href="#" id="suivante">Page suivante</a>
  <a href="#" id="derniere">Derni&egrave;re page</a>
</div>

Utilisation de la classe Pagination

Maintenant, il faut importer les fichiers Javascript nécessaires. Pour cela, il suffit d’ajouter les lignes suivantes dans le head de votre page HTML :

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/pagination.js"></script>

Enfin, nous allons instancier notre objet afin de pouvoir naviguer ; toujours dans le head de votre page, vous pouvez ajouter les lignes suivantes :

<script type="text/javascript">
  window.addEvent('domready', function() {
    var pagination = new Pagination('acteurs', {
      currentPage: 2,
      lines: 3
    });

    $('precedente').addEvent('click', function(event) {
      new Event(event).stop();
      pagination.previousPage();
    });

    $('suivante').addEvent('click', function(event) {
      new Event(event).stop();
      pagination.nextPage();
    });

    $('premiere').addEvent('click', function(event) {
      new Event(event).stop();
      pagination.firstPage();
    });

    $('derniere').addEvent('click', function(event) {
      new Event(event).stop();
      pagination.lastPage();
    });
  });
</script>

Voyons un peu ce que ce code fait :

Tout d’abord, il attend que le DOM soit prêt pour pouvoir créer notre objet : window.addEvent('domready', function() {...}). Pour plus de détails sur cette syntaxe, référez-vous à la page https://mootools.net/core/docs/1.6.0/Utilities/DOMReady#Window-Event:-domready.

L’objet pagination est instancié et fait référence à la table acteurs ; de plus, il précise que la page par défaut est la 2 et qu’il faut afficher 3 lignes par page.

Ensuite, on ajoute les actions sur les liens pour naviguer.

Et voilà, notre tableau est maintenant paginé.