[DataTable] Masquer une colonne en mode mobile

Version imprimable

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:

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>

27/11/2019, 12h56
Toufik83

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().
27/11/2019, 22h27
lnquaidorsay

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)
27/11/2019, 22h44
Toufik83

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).

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:

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 ?

Salut,

Commence par mettre les classes de contrôles dans les <th> :
Code:

1 2 3 4 5 6 7 <th></th> <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:

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.

28/11/2019, 23h57
lnquaidorsay

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.

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:

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.

29/11/2019, 00h22
lnquaidorsay

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
29/11/2019, 00h41
Toufik83

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.

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:

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:

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 ?