Retourner à la page d'accueil de TJS

Script tritab : Script de tri dynamique de tableau

Trier dynaminquement un tableau en cliquant sur les titres de colonnes
Partie II : L'interactivité / Chapitre 12 : Manipuler le document / Page 184

Exécution du script

Emulation de la console

Code source

<html><head><style type="text/css">body {  height:300px;    }i.fas {  min-width: 20px;}.light {  color:#999;}.active {  color:#00d;    }    table.tritable {        margin:5px;         border-collapse: collapse;         border: 1px solid black;    }    table.tritable th {        font-size:15px;        border: 1px solid black;        padding:4px;        cursor: pointer;        background-color:#ddd;    }    table.tritable td {        font-size:14px;        border: 1px solid black;        padding:4px;    }    table.tritable td.nb {        text-align: right;        }</style><title>Exemple complet du tri de tableau</title><script type="text/javascript">document.addEventListener("readystatechange", function(evt) {  if (document.readyState=="interactive") {    /* Trouver et parcourir tous les tableaux de classe tritable */    var elts=document.querySelectorAll("table.tritable");    for (var i=0; i<elts.length; i++) {      elts[i].dataset.tritable=true;      /* Rechercher toutes les en-têtes de l'élément i */      var ths=elts[i].querySelectorAll("th");      for (var j=0; j<ths.length; j++) {        /* Ajout de l'icone indiquant la possibilité de tri */          ths[j].innerHTML+=" <i class=\"fas fa-sort light\"></i>";        ths[j].dataset.sens="";        /* Ajout de l'event click */          ths[j].addEventListener("click", triColonne, false);      }    }  }});    /* Fonction appelée sur le clic du titre de colonne */  function triColonne(evt) {  var elt=evt.currentTarget;  var table=elt.parentElement.parentElement.parentElement;  /* Mise à jour des icones du sens de tri sur tous les TH */  var ths=table.querySelectorAll("th");  for (var j=0; j<ths.length; j++) {    var icon=ths[j].querySelector("i.fas");    if (ths[j]===elt) {      /* On est sur la colonne cliquée */      /* Détermination du sens de tri en fonction du sens actuel */      if (ths[j].dataset.sens=="up") {           var sens="down";      } else {          var sens="up";      }      icon.className="fas fa-sort-"+sens+" active";              /* Lancement du tri du tableau table sur la colonne j dans le bon sens */      ths[j].dataset.sens=sens;      triTable(table, j, sens);    } else {      /* On repasse à l'icone non trié pour les autres colonnes */        ths[j].dataset.sens="";      icon.className="fas fa-sort light";    }  }} /* Fonction de tri de la colonne numColonne de table en sens up ou down */function triTable(table, numColonne, sens) {   var tbody=table.getElementsByTagName("tbody")[0];  var trs=tbody.getElementsByTagName("tr"); /* Liste des lignes TR */  var triABulle=true; /* Indicateur que le tri n'est pas terminé */  var nbMouvement=0;  while (triABulle) { /* Tant que le tri n'est pas terminé */    var isInversion=false;    /* Parcourir la liste des lignes de 1 (hors en-tête) à N-1 */    for (var i=1; i < trs.length - 1; i++) {       var tdCi=trs[i].getElementsByTagName("td")[numColonne];      var tdCiplus1=trs[i+1].getElementsByTagName("td")[numColonne];      if (tdCi.className=="nb") { /* Colonne numérique : Conversion en nombres */        var ei=parseFloat(tdCi.innerText);        var eiplus1=parseFloat(tdCiplus1.innerText);      } else { /* Colonne text simple */        var ei=tdCi.innerText.toLowerCase();        var eiplus1=tdCiplus1.innerText.toLowerCase();      }      if ((sens=="up") && ( ei > eiplus1 )) {          /* Sens croissant, ligne i est plus grande que ligne i+1 : inversion */             isInversion=true;        nbMouvement++;        break;  /* La boucle for est interrompue pour réaliser l'inversion */      }      if ((sens=="down") && ( ei < eiplus1 )) {          /* Sens décroissant, ligne i est plus petite que ligne i+1 : inversion */             isInversion=true;        nbMouvement++;        break;  /* La boucle for est interrompue pour réaliser l'inversion*/      }    }    if (isInversion) {       /* il faut inverser les lignes i et i+1 */      trs[i].parentNode.insertBefore(trs[i + 1], trs[i]);    } else {       /* Pas de mouvement, le tri à bulles est terminé */        triABulle=false;    }  }  console.log(nbMouvement+" mouvements pour la colonne N°"+numColonne+" sens "+sens);}   </script><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"></head><body>  <h1 id="monH1" class="titre">Tri dynamique de tableau</h1><table class="tritable">  <tr>    <th>Client</th>    <th>Commandes</th>    <th>Chiffre Affaires</th>  </tr>  <tr><td>Raymond</td><td class="nb">2</td><td class="nb">250</td></tr>  <tr><td>Gérard</td><td class="nb">1</td><td class="nb">150</td></tr>  <tr><td>Lucie</td><td class="nb">10</td><td class="nb">850</td></tr>  <tr><td>Arthur</td><td class="nb">5</td><td class="nb">50</td></tr>  <tr><td>Albert</td><td class="nb">2</td><td class="nb">62</td></tr>  <tr><td>Bernard</td><td class="nb">4</td><td class="nb">80</td></tr>  <tr><td>Marie</td><td class="nb">20</td><td class="nb">520</td></tr>  <tr><td>Louis</td><td class="nb">15</td><td class="nb">90</td></tr></table></body></html>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 12/11/2019 04:10:06 sur php7 en 68.3 ms