Bonjour,

J'ai voulu utiliser l'extension jQuery Datatables qui permet de fixer l'entête des tableaux. Elle fonctionne très bien. Le problème est que certains de mes tableaux contiennent beaucoup de colonnes, et ont donc un scroll horizontal.

Malheureusement, le FixedHeader que j'ai mis en place n'arrive pas à s'adapter à ce scroll...

Voici mon code, est ce que vous avez des idées ?

table {
		padding: 0;
		border-spacing: 0;
	}

		$('#tableauDPC').DataTable( {
			dom: 'C<"clear">lfrtip',
			colVis: {
				activate: "mouseover"
			},
			"colVis": {
				"buttonText": "Choix des colonnes"
			},
			"language": {
				"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
			},
			"order": [],
			stateSave: true,
			fixedHeader: true,
			"scrollX": true,
			"sScrollX": "100%",
			"sScrollXInner": "110%"
		} );

function afficherInfosStageDPC($stages){
  $html = '<div class="table-responsive"  >
  <table class="table table-hover table-bordered" id="tableauDPC">
  <thead><tr>
  <th>Nom Prénom</th>
  <th>Portable</th>
  <th>CP + Ville</th>
  <th>Mail</th>
  <th>Type Financement</th>
  <th>Etat inscription</th>
  <th>Etat EPP1</th>
  <th>Dernier mail EPP1</th>
  <th>Convention signée</th>
  <th>Mail envoi convoc</th>
  <th>Etat EPP2</th>
  <th>Dernier mail EPP2</th>
  <th>Note EPP2</th>
  <th>Valide son DPC par ce prog</th>
  <th>QSD réalisé</th>
  <th>Dernier mail QSD</th>
  </tr></thead>
  <tbody>';
  foreach($stages as $stage){
    $lienFicheStagiaire=$stage[1];
    $nomprenom=$stage[2].'<br>'.$stage[3];
    $portable=$stage[4];
    $adresse=$stage[5].'<br>'.$stage[6];
    $mail=$stage[7];
    if ($stage[8]=='EMPLOYEUR') {
      $typeFinancement= '<p class="texte_5BC0DE">EMPLOYEUR</p>';
    }
    elseif ($stage[8]=='PERSONNEL') {
      $typeFinancement= '<p>PERSONNEL</p>';
    }
    elseif ($stage[8]=='FIFPL') {
      $typeFinancement= '<p class="texte_F0AD4E">FIF</p>';
    }
    elseif ($stage[8]=='DPC') {
      $typeFinancement= '<p class="texte_5BC0DE">DPC</p>';
    }
    if ($stage[9]=='Inscrit') {
      $etatInscription= '<b class="texte_5CB85C">V</b>';
    }
    elseif ($stage[9]=='Pré-inscrit') {
      $etatInscription= '<p>Pré-Inscrit</p>';
    }

    if ($stage[10]=='Validé') {
      $etatEPP1= '<b class="texte_5CB85C">V</b>';
    }
    elseif ($stage[10]=='Non validé') {
      $etatEPP1= '<p class="texte_D9534F">-</p>';
    }
    $dernierMailEPP1=strftime('%d/%m/%Y',strtotime($stage[11]));
    $mailEnvoiConvoc=strftime('%d/%m/%Y',strtotime($stage[12]));
    if ($stage[13]==1) {
      $conventionSignee= '<div class="form-check">
      <input type="checkbox" class="form-check-input" checked>
      </div>';
    }
    elseif ($stage[13]==0) {
      $conventionSignee= '<div class="form-check">
      <input type="checkbox" class="form-check-input">
      </div>';
    }
    $etatEPP2=$stage[14];
    $dernierMailEPP2=strftime('%d/%m/%Y',strtotime($stage[15]));
    $noteEPP2=$stage[16];
    $DPCValide=$stage[17];
    $QSDRecus=$stage[18];
    $dernierMailQSD=strftime('%d/%m/%Y',strtotime($stage[19]));

    $html.= '<tr>';
    $html.='<td><a class="btn-link"  href="?page=ficheStagiaire&id='.$lienFicheStagiaire.'">'.$nomprenom.'</a></td>';
    $html.='<td>'.$portable.'</td>';
    $html.='<td>'.$adresse.'</td>';
    $html.='<td>'.$mail.'</td>';
    $html.='<td align="center">'.$typeFinancement.'</td>';
    $html.='<td align="center">'.$etatInscription.'</td>';
    $html.='<td align="center">'.$etatEPP1.'</td>';
    $html.='<td align="center">'.$dernierMailEPP1.'</td>';
    $html.='<td align="center">'.$conventionSignee.'</td>';
    $html.='<td align="center">'.$mailEnvoiConvoc.'</td>';
    $html.='<td align="center">'.$etatEPP2.'</td>';
    $html.='<td align="center">'.$dernierMailEPP2.'</td>';
    $html.='<td align="center">'.$noteEPP2.'</td>';
    $html.='<td align="center">'.$DPCValide.'</td>';
    $html.='<td align="center">'.$QSDRecus.'</td>';
    $html.='<td align="center">'.$dernierMailQSD.'</td>';
    $html.='</tr>';
  }
  $html.= '</tbody></table></div>';
  return $html;
}

Merci d'avance pour vos réponses...

-
Edité par thomas_dubois 3 décembre 2016 à 15:40:02