Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    juin 2012
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2012
    Messages : 57
    Points : 46
    Points
    46
    Par défaut [DataTable] Masquer une colonne en mode mobile
    Bonjour,

    Je suis sur une datatable 1.10.16 et j'affiche certaines informations.

    Je veux :

    1 - lors d'un affichage mobile n'afficher que la première colonne et lors du click sur le bouton + du datatable, afficher les autres colonnes.

    2 - je n'arrive pas à supprimer une row de datatable ayant un id que je recupère via window.opener.

    Comment puis je le faire en jquery.

    mon code :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    <script>
        var timeoutId;
        var datatable_etudiants;
       $(document).ready( function () {
            init_datatables();
                    update_students();
            });
    </script>
     
    <div id="collapseetudiants">
            <div class="row" style="margin:0;">
                <div class="table-responsive">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <table id="datatable_etudiants" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Nom</th>
                                    <th>Prenom</th>
                                    <th>Adresse</th>
                                    <th>ville</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        <span class="text-right col-lg-12 col-md-12 col-sm-12 col-xs-12">Retour en haut</span>
                    </div>
                </div>
            </div>
     </div>
     <script>
        function init_datatables() {
           datatable_etudiants = $('#datatable_etudiants').DataTable({
            searching: false,
            responsive: true,
            processing: true,
            paging: false,
            columnDefs: [
                { "width": "20%", "targets": 0 },
                { "width": "15%", "targets": 1 },
                { "width": "30%", "targets": 2 },
                { "width": "40%", "targets": 3 }
            ],
            language: {
                url: "/cdn/js/datatables/1.10.16/french.json",
                emptyTable : "Chargement des donnée en cours, veuillez patienter ..."
            }
            });
            new $.fn.dataTable.FixedHeader(datatable_etudiants);
       }
     
            function update_students(){
              
                $.get("myActionController1",{},function(data){
                    datatable_etudiants.clear();
                    $.each(data.students,function(i,student){
                           $.when($.get("myActionController2/" + student.idStudent,{},function(d){
                              (data.students[i]).news = d;
                           })).done(function(){
                                 add_row_students(datatable_suspicions, data.students[i]);
                         });
                   });
              });
            
            }
            
            function add_row_students(e, data) {
                   e.row.add( [
                          data.nom,
                          data.prenom,
                          data.adr,
                          data.news
                    ] ).draw();
          }
    </script>

  2. #2
    Membre chevronné Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 204
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 204
    Points : 2 003
    Points
    2 003
    Par défaut
    Salut,

    Elle existe l'option responsive et c'est à toi de choisir la position du bouton de contrôle à droite ou à gauche.

    Pour la suppression d'une ligne, il faut utiliser les méthodes de L'API DataTable, voir row().remove().

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    juin 2012
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2012
    Messages : 57
    Points : 46
    Points
    46
    Par défaut
    Salut Toufik83,

    j'ai vu l'option responsive. Et si je veux juste afficher une colonne(Exemple : firstname et au click du bouton +, les autres colonnes s'affichent.), car dans les deux exemples de gauche comme de droite, ils affichent deux colonnes (firstname et lastnanme)

  4. #4
    Membre chevronné Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 204
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 204
    Points : 2 003
    Points
    2 003
    Par défaut
    As-tu essayé d'augmenter le width de la première colonne et utiliser l'option responsivePriority?

    Sinon, il y a mieux, les classes de contrôle qui sont adaptées à ce genre d'affichage (voir les classes attribuées aux <th> dans le code html).

  5. #5
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    juin 2012
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2012
    Messages : 57
    Points : 46
    Points
    46
    Par défaut
    Salut Toufik83,

    J'ai essayé l'option responsivePriority(en mettant responsivePriority: 1 et responsive: true sur la seule colonne où je veux qu'il s'affiche en responsive),mais il m'affiche toujours 3 colonnes et non une colonne en mode responsive.
    Moi je veux avoir une colonne en responsive et lors du click, il affiche les autres.

    Autre point que j'ai, je veux rendre ma cellule ville de ma datatable cliquable et ouvrir un un lien pour chaque ligne de ma datatable et je n'arrive pas à passer l'idVille voir code en bas

    voici mes données:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
     
    <script>
    var data = [
      {"nom":"dupond",
      "prenom":"Thierry",
      "adresse":"2 rue edmond beliot",
      "ville":"lyon",
      "idVile":"123"
    },
     
    {
    "nom":"reger",
      "prenom":"Thomas",
      "adresse":"9 rue amandine Ross",
      "ville":"Belfort",
      "idVile":"124"
    }
    ];
     
     function init_datatables() {
           datatable_etudiants = $('#datatable_etudiants').DataTable({
            searching: false,
            responsive: true,
            processing: true,
            paging: false,
            columnDefs: [
                { "width": "20%", "targets": 0,"responsivePriority": 1, },
                { "width": "15%", "targets": 1 },
                { "width": "30%", "targets": 2 , "render": function ( data, type, row, meta ) {
          return '<a href="monLien/'+idVile+'"+>Localiser ma ville</a>';
        }},
                { "width": "40%", "targets": 3 }
            ],
            language: {
                emptyTable : "Chargement des donnée en cours, veuillez patienter ..."
            }
            });
       }
     
    function add_row_students(e, data) {
                   e.row.add( [
                          data.nom,
                          data.prenom,
                          data.adr,
                          data.news
                    ] ).draw();
          }
    </script>
    comment puis je faire ?

  6. #6
    Membre chevronné Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 204
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 204
    Points : 2 003
    Points
    2 003
    Par défaut
    Salut,

    Commence par mettre les classes de contrôles dans les <th> :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
                  <th></th><!-- Ce th est reservé pour la colonne du bouton (+/-) responsive-->
                  <th class="all">Nom</th>
                  <th class="desktop">Prenom</th>
                  <th class="desktop">Adresse</th>
                  <th class="desktop">ville</th>
                  <th class="desktop">IdVille</th>

    Notes bien la classe all pour la colonne Nom, cela veut dire que cette colonne s'affichera sur tous les types d'écran (Pc,Tablette large, Tablette small, et mobile large et small) alors que les colonnes ayant la classe desktop s'afficheront seulement sur un écran large, et si tu veux qu'elles soient affichées sur les tablettes tu n'as qu'à modifier desktop par tablet-l (landscape) ou tablet-p (portrait)

    Après il faut que tu m'expliques un truc, est-ce que tu veux alimenter la table avec le tableau data ou bien avec le retour des $.get() ?

    Si c'est avec data dans ce cas il faut ajouter l'option data et définir le columnDefs comme suite :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
     
        data: data,
        columnDefs: [{
            width: "2%",
            data: null,
            targets: 0,
            defaultContent: '',
            orderable: false,
            searchable: false
          },
          {
            width: "15%",
            targets: 1,
            data: "nom"
          },
          {
            width: "15%",
            targets: 2,
            data: "prenom"
          },
          {
            width: "15%",
            targets: 3,
            data: "adresse"
          },
          {
            width: "15%",
            targets: 4,
            data: "ville"
          },
          {
            width: "15%",
            targets: 5,
            data: null,//puisque on va utiliser render
             render: function(data, type, row, meta) {
              /**/console.log('data :', data,
                ", type :", type, ", row :", row, ", meta :", meta);
              return '<a href="monLien/?idVille=' 
               + row.idVille 
               + '">Localiser ma ville</a>';
            }
          }
        ]
    J'ai ajouté la ligne console.log dans render pour voir le contenu de chaque variable de la fonction render, le premier data c'est les données de la ligne.
    Comme il est possible d'accéder à la valeur de l'id de la ville avec row.idVile aussi.

    Voilà le lien en ligne pour voir le résultat complet.

  7. #7
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    juin 2012
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2012
    Messages : 57
    Points : 46
    Points
    46
    Par défaut
    Salut Toufik83,
    encore merci, on avance et on commence à voir le bout du tunnel.

    Après il faut que tu m'expliques un truc, est-ce que tu veux alimenter la table avec le tableau data ou bien avec le retour de $.getJSON() ? => réponse : Je veux alimenter les données avec $.getJSON() qui me renverra une structure de données comme data. Donc si tu peux me montrer un exemple pareil avec $.getJSON() , ce serait top. Ensuite ajouter le loader au chargement des données et l'arrêter quand $.getJSON() commence à alimenter les données.
    Comme ça je pourrai tester l'affichage en desktop et responsive.

  8. #8
    Membre chevronné Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 204
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 204
    Points : 2 003
    Points
    2 003
    Par défaut
    Bah tu te compliques la vie, parce que ce que tu peux passer par l'option ajax de DataTable pour l'alimenter au lieu de passer par deux fonctions $.get.

    J'imagine que la structure de l'objet est du genre :
    Code json : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     
      [
      {"nom":"dupond",
      "prenom":"Thierry",
      "adresse":"2 rue edmond beliot",
      "ville":"lyon",
      "idVile":"123",
       "news":{....}
    },
     
    {
      "nom":"reger",
      "prenom":"Thomas",
      "adresse":"9 rue amandine Ross",
      "ville":"Belfort",
      "idVile":"124",
       "news":{...}
    }];
    , je me trompe ?

    Puis je pense qu'il faut que tu essaies d'utiliser un seul fichier serveur/json qui génère le même objet que les deux $.get.

  9. #9
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    juin 2012
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2012
    Messages : 57
    Points : 46
    Points
    46
    Par défaut
    Oui Toufik83, la structure de l'objet est bien celle là. Oui dans mon cas, je passe par $.getJSON et non par ajax de datatable.

    il faut que tu essaies d'utiliser un seul fichier serveur/json qui génère le même objet que les deux $.getJSON. => cette partie là, je ne sais comment generer un seul fichier serveur/json, je n'ai pas d'idée.

    As tu un exemple avec ajax de datatable à defaut de $.getJSON

  10. #10
    Membre chevronné Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 204
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 204
    Points : 2 003
    Points
    2 003
    Par défaut
    Je sais que tu ne vas pas aimer ce que je vais dire, mais crois moi ta méthode ralenti le fonctionnement du script js, vu que $.get est asynchrone et qu'elle prendra un peu de temps pour récupérer les données, surtout quand tu mets une deuxième $.get dans la première et dans une boucle each !

    Le code des contrôleurs actionController 1 et 2 est en php ou c'est un autre langage serveur ?

    Voilà un exemple qui montre comment utiliser l'option ajax.

    Ajoutes seulement ajax:"lien_vers_actionController", dans les options mais dans ce cas tu ne dois utiliser qu'un seul fichier et pas deux.

  11. #11
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    juin 2012
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2012
    Messages : 57
    Points : 46
    Points
    46
    Par défaut
    Salut Toufik83 , je pense que c'est l'une de dernières questions avant de fermer cette discussion.

    Je n'arrive pas à faire ceci avec ma datatable :

    - Afficher le message "Chargement en cours ..." lors du chargement de mes étudiants et faire "Aucune donnée disponible ..." si la datatable est vide.

    Je n'arrive pas faire quelque chose du style :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
     
     
    <script>
    var data = [
      {"nom":"dupond",
      "prenom":"Thierry",
      "adresse":"2 rue edmond beliot",
      "ville":"lyon",
      "idVile":"123"
    },
     
    {
    "nom":"reger",
      "prenom":"Thomas",
      "adresse":"9 rue amandine Ross",
      "ville":"Belfort",
      "idVile":"124"
    }
    ];
     
     function init_datatables() {
           datatable_etudiants = $('#datatable_etudiants').DataTable({
            searching: false,
            responsive: true,
            processing: true,
            paging: false,
            columnDefs: [
                { "width": "20%", "targets": 0,"responsivePriority": 1, },
                { "width": "15%", "targets": 1 },
                { "width": "30%", "targets": 2 , "render": function ( data, type, row, meta ) {
          return '<a href="monLien/'+idVile+'"+>Localiser ma ville</a>';
        }},
                { "width": "40%", "targets": 3 }
            ],
            language: {
                emptyTable : "Chargement des donnée en cours, veuillez patienter ..."
            }
            });
       }
     
    function add_row_students(e, data) {
                   e.row.add( [
                          data.nom,
                          data.prenom,
                          data.adr,
                          data.news
                    ] ).draw();
          }
    </script>
    si data est non vide sachant que data est recupérer via $.getJSON ou via ajax et

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
     
    $('#datatable_etudiants').dataTable( {
        "oLanguage": {
            "sEmptyTable":     "Aucune donnée disponible ..."
        }
    } );
    si après le callback ajax et que data est vide.

    Comment faire ?

Discussions similaires

  1. Réponses: 4
    Dernier message: 23/12/2006, 17h55
  2. Masquer une colonne d'une feuille de données
    Par seljack dans le forum Access
    Réponses: 4
    Dernier message: 12/05/2006, 11h40
  3. [Jasper Report] Masquer une colonne
    Par BiM dans le forum Jasper
    Réponses: 4
    Dernier message: 28/03/2006, 16h04
  4. [JTable] Masquer une colonne
    Par IvanPopov dans le forum Composants
    Réponses: 2
    Dernier message: 26/07/2005, 18h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo