Exercice 20 : Utilisation de Datatables.js

Le 14 Février 2015

Introduction


Aujourd’hui, je vais utiliser datatables.js pour organiser la vue des étudiants dans l’exercice 20 Supercours.

La fonction de recherche de Datatables.js est très performante et effectue des recherches sur tout le tableau. La fonctionnalité de tri par colonne est très agréable également. Toujours dans l’optique de ne pas recréer la roue MAIS de créer des applications novatrices, je continue dans cette voie, en intégrant divers plugins, qui communiquent à  l’aide d’objets JSON.

De plus, je vais ajouter la fonctionnalité de Drag and Drop sur chaque ligne, afin de plus tard, pouvoir réaliser des listes ou des statistiques personnalisées-dynamiques par drag and drop.

Le petit problème est actuellement que je ne suis pas encore sur la piste de faire les changements directement à la volée dans le tableau, pour l’instant, je sais le faire en ouvrant une fenêtre additionnelle. Ce n’est pas grave, puisqu’à l’avenir, le double clic ouvrira la fenêtre de l’étudiant, qui sera modifiable, cela revient au même.

Voici le résultat :

dttb

Le code :


Voici l’ordonnancement :

En résumé:

Il faut ouvrir la fenêtre, lire les données en base de données, les « donner » à datatable.js, puis générer datatables dans sa  TABLE.

On peut voir datatables.js comme un « améliorateur de design« , qui vient se plaquer sur une balise <TABLE> Html.

En détail :

PHASE 1

tabet

Je clique dans le menu dans le navigateur sur « Tableau des étudiant », la fonction Table() est alors exécutée avec pour argument le fichier lTbEtudiant.php qui sera donc exécuté. Tout ceci se trouve dans le fichier de type HTML index.html :


 <li onclick="Table('lTbEtudiant.php')"> <span class="ui-icon ui-icon-person"> </span>Tableau des Etudiants</li>

PHASE 2

Voici ma méthode Table() de ma classe classeTable.js Javascript dont le but est de :

  • Ouvrir la fenêtre Dialog appropriée.
  • Spécifier les options de traduction de datatables.js.
  • Appeler en Ajax le fichier lTbEtudiant.php qui va nous fournir les données des étudiants au format Json en retour, après avoir lu dans la base de donnée.
  • Dans sa deuxième partie, la fonction gère les évènements onclick, dblclick et le drag and drop, cette partie n’est pas finie.

var oTable = null;

function Table(selectphp){

 $( "#tableEtudiant" ).dialog( "open" );
 
 /* DESTRUCTION D'UN TABLEAU PRE EXISTANT */
 if (oTable) {
 oTable.fnDestroy();
 }

 /* TRADUCTION DES TITRES ET LECTURE AJAX DES DONNEES*/
 oTable = $('#tbe').dataTable({
 "language": {
 "lengthMenu": "Afficher _MENU_ enregistrements par page",
 "zeroRecords": "Rien trouve - Tentez d'autres critères",
 "info": "Montrer _PAGE_ de _PAGES_",
 "infoEmpty": "Il ny a pas d'enregistrement",
 "infoFiltered": "(filtre sur _MAX_ total d'enregistrements)",
 "search": "Rechercher",
 },
 "ajax": selectphp,
 }); 

 /* EVENEMENTS SUR SIMPLE CLICK */
 $('#tbe tbody').on( 'click', 'tr', function () {
 var aPos = $('#tbe').dataTable().fnGetPosition(this);
 var aData = $('#tbe').dataTable().fnGetData(aPos[0]);
 $(this).draggable({helper:'clone',scroll: false}); // Draggable
 
 if ( $(this).hasClass('selected') ) {
 $(this).removeClass('selected');
 
 }
 else {
 oTable.$('tr.selected').removeClass('selected');
 $(this).addClass('selected');
 
 }
 $('#button').click( function () {
 oTable.row('.selected').remove().draw( false );
 });
 });
 
 /* EVENEMENTS SUR DOUBLE CLICK */
 $('#tbe tbody').on( 'dblclick', 'tr', function () {
 var aPos = $('#tbe').dataTable().fnGetPosition(this);
 var aData = $('#tbe').dataTable().fnGetData(aPos[0]); 
 var id = aData[aPos][0];
 alert(id); 
 /* modifierObjet(id); */
 /* DEBUGGING */
 /* alert( 'Numéro de Livraison: '+aData[aPos][0] ); alert( 'Row index: '+oTable.row( this ).index() ); */
 });
}

Note : oTable permet de regénérer « à la barbare » tout le tableau lorsqu’on rappelle la méthode Table(). C’est un moyen rapide que j’ai trouvé pour ne pas avoir d’erreur, cependant, il existe des méthodes plus élégantes qui ne rechargent que les données du tableau, mais qui sont plus compliquées…

La ligne

$(this).draggable({helper:'clone',scroll: false});

permet de rendre chaque ligne draggable, ce qui permet d’envisager des solutions novatrices pour un peu plus tard.

PHASE 3

Le fichier PHP, comme d’habitude, sert uniquement à requêter la base de données.

Il faudrait savoir le remplacer par Nodes.js dès que j’ai le temps, ou Java.

Pour l’instant, il n’y a pas de jointures, mais l’intérêt futur(d’ici 2 jours) sera d’ajouter par jointures les notes des élèves, leurs professeurs, et surtout leurs cours. Ce qui permettra le tri par notes des élèves par exemple, en un clin d’oeil, on pourra savoir quel élève a les meilleures notes de l’école ! C’est carrément tripant. Et avec le drag and drop, on pourra créer des listes des meilleurs élèves par exemple, super facilement.

lTbEtudiant.php:
<?php
include('connexionSql.php');
connexionSql();

$jsonresponse=array("data"=>array()); 

$lectureSql="SELECT * FROM etudiant";
$lecture = mysql_query($lectureSql) or die(mysql_error());

while ($col=mysql_fetch_array($lecture)){ 
 $tab=array(
 $col[0],
 $col[1],
 $col[2],
 $col[3],
 $col[4],
 $col[5],
 $col[6],
 $col[7],
 $col[8],
 $col[9]);
 
 array_push($jsonresponse["data"],$tab);
}; 
 
echo json_encode($jsonresponse);

exit();

PHASE 4

Dans le fichier HTML de la PHASE  1 se trouve la TABLE  qui a l’id « tbe » qui va recueillir la génération de datatables.js, grâce à la méthode $(‘#tbe’).dataTable() de la Phase 1.

Contrainte :

Le nombre de colonnes du tableau doit correspondre au nombre de colonnes de l’objet JSON et donc, de la requête SQL.:


<table id="tbe" class="display" cellspacing="0" width="100%">
 <thead>
 <tr>
 <th>Id Etudiant </th>
 <th>Nom </th>
 <th>Prénom </th>
 <th>Age </th>
 <th>Date de Naissance </th>
 <th>Adresse </th>
 <th>Date Entrée </th>
 <th>Date Sortie </th>
 <th>Paiement </th>
 <th>Pays </th>

 
 </tr>
 </thead>

 <tfoot>
 <tr>
 
 
 </tr>
 </tfoot>
</table>

En annexe, pour info, voici la méthode de création de la fenêtre Jquery Dialog #tableEtudiant :

$(function() {
 $( "#tableEtudiant" ).dialog({width:900,height:530,autoOpen: true,draggable: true,appendTo: 'body'}).dialogExtend({
 "closable" : true,
 "maximizable" : false,
 "minimizable" : false,
 "collapsable" : false,
 "dblclick" : "collapse",
 "minimizeLocation" : "right",
 });
 $( "#tableEtudiant" ).dialog( "close" );//Par défaut
 });
Publicités