Scribd Logo
Importer

Bienvenue sur Scribd !

  • CoursUGA Twa Dataset

    Transféré par

    Raphaël tamesse
    29 vues17 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    29 vues17 pages

    CoursUGA Twa Dataset

    Transféré par

    Raphaël tamesse

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 17

    M2 Dilipem – S1 2023-2024

    Sylvain Hatier
    C215
    sylvain.hatier@univ-grenoble-alpes.fr
    Dataset
    &
    Datatables
    Dataset

    Propriété d’un élément du DOM


    ●
    MyElementHTML.dataset → donne accès à l’ensemble
    des attributs du type data-myAttr présent dans le HTML

    3
    Dataset

    Intérêt
    ●
    Permet de stocker tout type d’information textuelle
    pour chaque élément du DOM (chaque balise)
    ●
    Rapidité d’accès
    ●
    Propriété sous la forme d’un objet JSON
    4
    Dataset

    Historique

    Des attributs détournés pour stocker des données (alt ,


    rel, title) mais → cet usage « trompe » navigateurs et
    moteurs d'indexation et est néfaste pourl'accessibilité du
    document.

    HTML5 autorise tout attribut débutant par data- → page


    valide si présence du doctype HTML5 : <!DOCTYPE html>
    5
    Usage de dataset
    Dataset

    Usage HTML

    <p id="student1" data-prenom="John" data-nom="Doe" data-birthdate="01/01/1970" ...>


    John Doe
    </p>

    7
    Dataset

    Usage

    Possibilité donc de stocker tout type de données, en tant que chaîne de texte

    But : exploiter avec JavaScript (variable pour appel Ajax, sous-titres vidéo, informations à
    afficher au survol, etc.)

    Convention pour le nommage : un attribut au nom trop commun, du type data-name


    pourrait déjà être présent dans d'autres librairies que vous utilisez. Pour éviter ces
    possibles conflits, préfixez ou suffixez vos noms d’attributs → data-name-quiz || data-
    quiz-name

    8
    Dataset

    Usage JavaScript

    Tout attribut data est membre de dataset (en omettant le préfixe data-).
    Nom de la propriété = attribut auquel on a retiré le préfixe data-, et on retire les tirets (-)
    en mettant les lettres qui suivent en majuscules afin d'obtenir une camelCase.
    data-prenom-student → prenomStudent

    <script>
    let studentP= document.getElementById('student1');

    let prenomStudent = studentP.dataset.prenom;

    studentP.dataset.nom = 'XXX';

    studentP.dataset.nom = null; 9
    </script>
    Dataset

    Usage jQuery

    Méthode data() comme setter ou getter

    let prenomStudent = $("#student1").data("prenom");

    $("#student1").data("nom","XXX");

    10
    Datatables
    Datatables

    Intérêt : Une bibliothèque JavaScript pour améliorer la gestion et l'affichage de tableaux


    de données dans des pages web.

    Facilite la pagination, le tri et la recherche de données dans les tableaux.


    Personnalisable
    Améliore l'expérience utilisateur.

    12
    Datatables

    Utilisation : https://datatables.net/

    Intégration des fichiers →


    //cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css
    //cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js

    Initialisation du tableau →
    let table = new DataTable('#myTable');

    13
    Datatables

    Usage HTML:

    Le tableau élément HTML doit inclure


    - thead : pour les titres des colonnes
    - tbody : pour les données

    <table id='monTableau'>
    <thead>
    <tr><th>Champ 1</th><th>Champ 2</th><th>Champ 3</th></tr>
    </thead>
    <tbody>
    <tr><td>Lorem</td><td>Ipsum</td><td>12,5</td></tr>
    <tr><td>Lorem2</td><td>Ipsum2</td><td>8</td></tr>
    <tr><td>Lorem3</td><td>Ipsum3</td><td>9,3</td></tr>
    </tbody> 14
    </table>
    Datatables

    Usage jQuery :

    $(document).ready(function () {
    $('#monTableau').DataTable();
    });

    Par défaut, DataTables trie le tableau par ordre croissant sur la 1ere colonne
    Possibilité de définir sur quelle colonne et dans quel ordre le tri par défaut se fait
    Possibilité de définir quel type de données est présent dans chaque colonne (numérique,
    chaîne de caractère) → important pour le tri effectué

    15
    Datatables

    Personnalisation

    <script>
    $(document).ready(function () {
    $('#myTable').DataTable({
    buttons: ['copy', 'excel', 'pdf'] // Utilisation de l'extension Buttons
    });
    });
    </script>

    16
    Datatables

    Personnalisation

    <script>
    $(document).ready(function () {
    $('#myTable').DataTable({
    buttons: ['copy', 'excel', 'pdf'] // Utilisation de l'extension Buttons
    });
    });
    </script>

    17

    Vous aimerez peut-être aussi