Lors d’un précédent billet, je vous avais présenté une méthode pour trier une liste en JavaScript. A l’époque, la sortie se faisait via la console. Dans la vraie vie du développeur Front, on affiche rarement le résultat sur la console (sauf pour débuguer).
Table des matières
Aussi, avec ce nouvel article je vais vous montrer comment effectuer les mêmes tris mais avec un affichage sur une page web.
Pour que ce soit joli, je vais utiliser Bootstrap pour donner un aspect sympathique à l’affichage.
Structure HTML de la page
Coté structure de la page en HTML, on reprend la base du dernier exemple avec les deux boutons permettant d’afficher le trie par âge et le trie par nom des personnages de notre jeu (reprise de l’exemple).
Puis on prépare l’espace où on affichera le résultat après chaque clic sur l’un ou l’autre bouton de choix. L’id utilisé pour cette sortie se nomme ” résultat ” :
<div class="container-fluid">
<h2>Trier en javaScript</h2>
<button type="button" class="btn btn-primary btn-sm" onclick="sortName()">Par Prénom</button>
<button type="button" class="btn btn-secondary btn-sm" onclick="sortAge()">Par Age</button>
<h3>Résultat</h3>
<div>
<div class="row">
<div class="col-12 col-md-4">
<div id="resultat"></div>
</div>
<div class="col-12 col-md-8">
</div>
</div>
</div>
</div>
Côté JavaScript
On retrouve notre fière équipe avec ses caractéristiques. C’est juste un prétexte pour disposer de chaînes de caractères (String) et de nombres à trier pour notre exemple de trie avec JavaScript :
var warrior=[
{ name: "Kraken", age: 21, weapon: "arc" },
{ name: "Améria", age: 27, weapon: "fusil" },
{ name: "Narfy", age: 25, weapon: "couteau" },
{ name: "Golïm", age: 17, weapon: "poignard" },
{ name: "Fôrfiot", age: 18, weapon: "lance-flamme" },
{ name: "Nolülf", age: 23, weapon: "hache" },
{ name: "Joliett", age: 22, weapon: "bazooka" }
];
Fonction affichage tableau
En JavaScript, on va passer par une fonction qui a pour mission de générer l’affichage du résultat du trie sous forme de tableau à l’emplacement repéré par l’id défini nommé ” resultat ” (vu au-dessus).
Vous repérez facilement les balises HTML mentionnées dans cette fonction pour constituer le tableau de données triées :
function display(i) {
console.log(i);
var html = document.getElementById('resultat').innerHTML;
html = html + "<table class='table table-striped'>";
html = html + "<thead class='thead-inverse'><tr>";
html = html + "<th scope='col'>Nom</th><th scope='col'>Age</th><th scope='col'>Arme</th>";
html = html + "</thead></tr>";
html = html + "<tbody>";
warrior.forEach(function (warrior) {
html = html + "<tr>";
html = html + "<td>" + warrior.name + "</td><td>" + warrior.age + "</td><td>" + warrior.weapon + "</td>";
html = html + "</tr>";
}) html = html + "</tbody>";
html = html + "</table>";
document.getElementById('resultat').innerHTML = html;
}
Trier des nombres
Ici rien de nouveau sous le soleil car on reprend tout simplement la fonction de la dernière fois pour trier par âge :
function sortAge() {
document.getElementById('resultat').innerHTML = " ";
var intro = "Trié par age croissant";
warrior.sort(function (a, b) {
return a.age - b.age;
});
display(intro);
}
Trier des String (chaînes de caractères)
De la même manière, on reprend tout simplement la fonction de la dernière fois pour trier par nom en utilisant la fonction sortName() :
function sortName() {
document.getElementById('resultat').innerHTML = " ";
var intro = "Trié par nom croissant";
warrior.sort(function (a, b) {
return a.name.localeCompare(b.name);
});
display(intro);
}
Et voilà le tour est joué !
Cette proposition de solution pour trier des données en JavaScript n’est évidemment pas la seule et unique possibilité. Vous pouvez très bien développer d’autres méthodes ou fonctions pour arriver au même résultat.
Comme j’adore échanger, vous pouvez laisser un commentaire ou partager votre avis ou méthode.
