Nous allons voir aujourd’hui comment classer des éléments d’une page en fonctions de certaines données (nom, position) grâce à quelques lignes de javascript.
La démonstration du résultat que l’on va obtenir est visible ici
On commence par créer notre html de manière classique, comme d’habitude j’importe bootstrap et jquery pour la forme et la simplicité.
En plus de ça on affiche dans notre page une série d’élément ayant la classe « card » ainsi que des attributs « data-position », « data-note » et « data-name » pour stocker les valeurs sur lesquelles on va effectuer le classement. On affiche auparavant un « select » qui nous permettra de choisir l’ordre que l’on souhaite afficher.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<!-- JS -->
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/custom.js"></script>
</head>
<body>
<div class="container main-container">
<div class="form-group">
<label for="select-order">Classer par</label>
<select class="form-control" id="select-order">
<option value="position">Position</option>
<option value="note">Note</option>
<option value="name">Nom</option>
</select>
</div>
<div class="card-container row">
<div class="item col-md-4" data-position="1" data-note="8" data-name="Paul">
<div class="card mb-3">
<img class="card-img-top" src="http://lorempixel.com/400/200/abstract" alt="illustration">
<div class="card-body">
<h3 class="card-title">Paul</h3>
<div class="card-subtitle">Position : 1</div>
<div class="card-text">Note : 8</div>
</div>
</div>
</div>
<!-- d'autres éléments avec différentes valeurs -->
</div>
</div>
</body>
</html>
On va maintenant s’occuper du javascript qui nous permettra de réordonner les éléments, il s’agit de détecter le choix sélectionné et de lancer le tri (numérique, numérique inversé ou alphabétique) sur nos attributs data-*. Le code suivant est suffisant :
/* à la sélection du classement on met à jour */
$(document).on("change", "#select-order", function () {
updateOrder();
});
/* au chargement de la page on lance le classement */
updateOrder();
});
function updateOrder() {
var order = $("#select-order").val();
if (order == 'position' || order == 'note' || order == 'name') {
var divList = $(".card");
if (order == 'position') { //tri numerique croissant
divList.sort(function (a, b) {
return $(a).data(order) - $(b).data(order);
});
} else if (order == 'note') {//tri numerique decroissant
divList.sort(function (a, b) {
return $(b).data(order) - $(a).data(order);
});
} else if (order == 'name') { //tri alphabetique
divList.sort(function (a, b) {
var compA = $(a).data(order).toUpperCase();
var compB = $(b).data(order).toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
});
}
$(".card-container").html(divList);
}
}