J'ai besoin de regrouper des données par files d'attente (queue). Après avoir cherché, j'ai découvert que dans Jquery il existe une solution : Accordion. http://jqueryui.com/accordion
Mon code d'origine :
Après avoir regarder l'exemple accodion, je constate que il faut un <div id="accordion"> pour commencer, puis pour chaque regroupement un simple <h3></h3> pour le titre , et <div></div> pour le contenu.
Après plusieurs essai, j'ai constaté qu'il faut mettre l'entete du tableau dans chaque <div>, car c'est plus lisible, mais aussi que cela pose un problème d'inclusion automatique d'un </div> en fin de tableau.
Dans le <head> j'ajoute
Il ne faut surtout pas oublier de trier la table par l'élément qui va servir à faire l'accordion, pour moi queid.
Il existe sans doute des meilleures solutions, mais celle ci marche parfaitement.
Mon code d'origine :
Rien d'innovant dans la structure, un tableau qui se remplit en boucle foreach.<table width="100%" border="1" class="tablist"><tr><th>Société</th><th>Contact</th><th>To Do</th><th>Creation</th><th>Priorité</th></tr><?php foreach ($ltodo as $output): ?><form action="" method="post"><tr><td><?php htmlout($output['rs']); ?></td><td><?php htmlout($output['prenom']." ".$output['nom']); ?></td><td><?php htmlout($output['lib']); ?></td><td><?php htmlout($output['dcrea']); ?></td><td><?php htmlout($output['prio']); ?></td><td><input type="text" name="doid" value="<?php echo htmlout($output['id']) ?>" size="2"><input class="modif" type="submit" name='action' value='Modif'><input class="supp" type="submit" name='action' value='Supprimer'></td></form><?php endforeach; ?>
Après avoir regarder l'exemple accodion, je constate que il faut un <div id="accordion"> pour commencer, puis pour chaque regroupement un simple <h3></h3> pour le titre , et <div></div> pour le contenu.
Après plusieurs essai, j'ai constaté qu'il faut mettre l'entete du tableau dans chaque <div>, car c'est plus lisible, mais aussi que cela pose un problème d'inclusion automatique d'un </div> en fin de tableau.
Dans le <head> j'ajoute
Voici donc la nouvelle portion de code :<script>$(function() {$( "#accordion" ).accordion();});</script>
<div id="accordion"><?php $que=0; ?><?php foreach ($ltodo as $output): ?><?php if (($que != $output['queid']) && ($que==0)) {echo "<h3>". $output['quelib']." </h3>"; echo "<div>"; }?><?php if (($que != $output['queid']) && ($que!=0)) {echo "</table></div> <h3>". $output['quelib']." </h3>"; echo "<div> "; }?><?php if ($que != $output['queid']) {echo '<table width=100% border=1 class=tablist>'; } ?><?php if ($que != $output['queid']) {echo '<tr><th>Société</th><th>Contact</th><th>To Do</th><th>Creation</th><th>Priorité</th></tr>'; } ?><?php $que=$output['queid']; ?>
- J'ajoute le div accordion
- j'initialise ma variable de comparaison, qui est un numérique, mais cela fonctionne aussi avec du texte (ma première valeur est 1, jamais 0)
- Mon foreach comme d'habitude
- Les tests pour la mise en forme
- Si ma variable de comparaison est différente de valeur de la sortie array, et que c'est la première fois que le processus tourne $que=0, alors j'affiche mes balises d'entete h3 et mon <div> de début de section accordion.
- Ensuite la même chose mais pour le deuxieme au x passages : je cloture mon tableau </table> et le </div> puis j'ajoute le nouveau tite, et un nouveau <div> pour la nouvelle section.
- Les deux lignes suivantes, dans tous les cas de nouvelle section j'ajoute mon entete de tableau.
- Et bien sur je stocke la nouvelle valeur dans ma variable pour le prochain passage de foreach
<?php endforeach; ?>
</tr></table>
</div></div>
- Je cloture mon tableau.
- et la dernière section et l'accordion
Il ne faut surtout pas oublier de trier la table par l'élément qui va servir à faire l'accordion, pour moi queid.
Il existe sans doute des meilleures solutions, mais celle ci marche parfaitement.
Commentaires
Enregistrer un commentaire