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