Discussion :

[lnquaidorsay]

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>

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

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

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

[lnquaidorsay]

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 ?

[Toufik83]

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.