Discussion :

[bricoreur]

Bonjour,

j'aimerai fixer mes 2 premières colonnes et mes 3 dernières colonnes de mon tableau qui est renseigné par des données issues d'un SGBD (nbre de lignes variables)

tentative 1 : j'arrive à scroller mon tableau mais pas à fixer mes colonnes (en css)

tentative 2 : j'arrive à fixer mes colonnes via DATATABLES mais uniquement avec des données statiques. Lorsque j'essaye d'insérer des données issues de mon foreach je n'y arrive pas.

je vous laisse mon code allégé


Form.php

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
 
 
...
 
 <!--  JS DATATABLES  -->
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
 
 
<!--  CSS DATATABLES  -->
 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
 <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css">
 
 
 
<table id="example" class="stripe row-border order-column" style="width:100%" >
 
 <thead>
 
  <tr>
   <th>NOM</th>
   <th>PRENOM</th>
   <th class="departement hide">DEPARTEMENT</th>
   <th>CAT.</th>
   <th>TAILLE</th>
   <th>MAIL</th>
   <th><input id="all" type="checkbox" onclick="clearCB('select_checkbox')"/></th>
   <th></th>
  </tr>
 
 </thead>
 
 
 <tbody>
 
  <?php 
  $i=0;
 
  foreach ($contacts as $contact)       {
 
   echo '<tr class="ligne'.($i % 2).'">';
    echo( "<td>".Secur::screen($contact->getNom())."</td>" );
    echo( "<td>".Secur::screen($contact->getPrenom())."</td>" );
    echo( "<td class='departement hide'>".Secur::screen($contactManager->getNomDepartement($contact->getDepartement()))."</td>" );
    echo( "<td>".Secur::screen($contact->getCategorie())."</td>" );
    echo( "<td>".Secur::screen($contact->getTaille())."</td>" );
    echo( "<td>".Secur::screen($contact->getEmail())."</td>" );
    echo '<td> <input type="checkbox" class="select_checkbox" name="mails_checked[]" id="mails_checked" value="'.Secur::screen($contact->getEmail()).'"/> </td>';   
    echo '<td> <a href="../VIEW/Form_Update_Registration.php?id='.Secur::screen($contact->getId()).' "> MODIFIER </a>  </td>';  
   echo( "</tr>" );
 
  $i++; 
  }
  ?>    
 
 </tbody>                
 
</table>

Datatables.js

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
 
 
/* FIXE LES COLONNES DROITES ET GAUCHES D'UN TABLEAU */
$(document).ready(function() {
 
 //console.log('test); 
 
 var table = $('#example').DataTable( {
  scrollY:        "150px",  /* hauteur du tableau */
  scrollX:        true,
  scrollCollapse: true,
  paging:         true,
  fixedColumns:   {
   leftColumns: 2,
   rightColumns: 1
  }
 } );
} );

Style.css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
 th, td {
  white-space: nowrap; 
 }
 
 div.dataTables_wrapper {
  width: 800px;
  margin: 0 auto;
 }

Je pense que l'on peut insérer des données php à l'intérieur du tableau?? Avez-vous une suggestion car DATATABLES semble super !!


VOILA CE QUE M'AFFICHE LA CONSOLE

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
jquery-3.3.1.js:3827 Uncaught TypeError: Cannot read property 'mData' of undefined
    at HTMLTableCellElement.<anonymous> (jquery.dataTables.min.js:90)
    at Function.each (jquery-3.3.1.js:354)
    at jQuery.fn.init.each (jquery-3.3.1.js:189)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:90)
    at Function.each (jquery-3.3.1.js:354)
    at jQuery.fn.init.each (jquery-3.3.1.js:189)
    at jQuery.fn.init.n [as dataTable] (jquery.dataTables.min.js:83)
    at jQuery.fn.init.h.fn.DataTable (jquery.dataTables.min.js:165)
    at HTMLDocument.<anonymous> (Datatables.js:8)
    at mightThrow (jquery-3.3.1.js:3534)

Je comprends qu'il ne doit pas trouver les données mais comment s'y prendre

Merci pour votre aide précieuse et suggestion

Bonnes années à vous

[bricoreur]

OK il me manquait une entete ....

Tout fonctionne