Jquery : Trier des éléments en fonction d’attributs data-*

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.

<!DOCTYPE html>
<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 :

$(document).ready(function () {
    /* à 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);
    }
}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.