Fixer des colonnes d'un tableau dynamique renseigné par des données récupérées SGBD

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:

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:

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:

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:

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