Multi tables avec onglet (Datatables Javascript)

Fermé
Pegase_91 Messages postés 10 Date d'inscription mardi 9 février 2016 Statut Membre Dernière intervention 22 février 2016 - 20 févr. 2016 à 18:04
Bonjour à tous,

Je suis en train de mettre en forme mes tableaux de données php MYSQL afin de les afficher sur mon futur site web via javascript.

Cependant je rencontre plusieurs difficultés à savoir :
-comment afficher plusieurs tableaux sur une même page
-comment placer ces tableaux dans des onglets appropriés tel que->https://www.datatables.net/beta/1.8/examples/api/tabs_and_scrolling.html

NB=J'utilise du javascript type datatable pour la mise en forme de mes tableaux.

voici mon code :



<!DOCTYPE html>
<html>
<head>

<title>Programme du jour</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="jquery-1.12.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.dataTables.min.css" />
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.columnFilter.js"></script>


<script type="text/javascript">
$(document).ready(function() {
$('#menuTable').DataTable( {
"scrollY": "400px",
"scrollCollapse": true,
"paging":false,

} );
} );

</script>
<script type="text/javascript">

$(document).ready(function(){
$('#menuTable').dataTable().columnFilter({
sPlaceHolder: "head:before",
aoColumns: [
null,
null,
null,
null
]
});

});

</script>

</head>


<body>

<?php

$serveur="localhost";
$login="root";
$pass="";



try{
$connexion=new PDO("mysql:host=$serveur;dbname=pegasedb",$login, $pass, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
$connexion->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);

$coursesSP=$connexion->query //requête 1 déjà afficher dans le tableau

("SELECT NUMR, HIPPODROME, NUMC,
TITRE
ORDER BY NUMR");

$coursesSP->setFetchMode(PDO::FETCH_OBJ);


$coursesCG=$connexion->query //requête 2 à afficher dans un autre tableau du même type que req1 (id=menuTable)

(""SELECT NUMR, HIPPODROME, NUMC,TITRE
ORDER BY NUMC");

$coursesCG->setFetchMode(PDO::FETCH_OBJ);

}
Catch(PDOException $e){
echo 'echec: '.$e->getMessage();
}

?>

<div>

<table width="1330px" style="font-size:70%" border="0" cellpadding="0" cellspacing="0" class="display" id="menuTable">

<thead>

<tr class="EnteteP">
<th align="center">N°R</th>
<th align="center">REUNION</th>
<th align="center">N°C</th>
<th align="center">TITRE</th>

</tr>

</thead>
<tbody>
<?php

While($resultat = $coursesSP->fetch() )
{

?>
<tr>
<td align="center"><?php echo $resultat->NUMR ;?></td>
<td align="center"><?php echo $resultat->HIPPODROME ;?></td>
<td align="center"><?php echo $resultat->NUMC ;?></td>
<td align="left"><?php echo $resultat->TITRE;?></td>

</tr>

<?php
}

$coursesSP->closeCursor();

?>

</tbody>
<tfoot>
</tfoot>
</table>
</div>
</body>
</html>



Mon problème est donc résume par "la mise en forme de tableaux php en tableaux dynamiques avec plusieurs onglets (ex : simpleG->(tab1) / coupléG ->(tab2) / ...).

Perso, je pense qu'il faut ajouter une fonction javascript (pour créer les onglets) et en // placer mon deuxième tableau en cohérence avec cette fonction dans mon code. La question est comment...

Des idées ?

Merci d'avance.
A voir également: