Il y a quelques jours, je cherchais à intégrer une manière simple et efficace de trier une table à l'aide d'un simple clic sur l'entête de la colonne de mon tableau. Je me suis donc mis à la recherche de la solution et j'ai trouver un framework intéressant : Stuart Langridge's Sorttable.js. Voici comment faire fonctionner le tout.
Télécharger - Framework Stuart Langridge's Sorttable.js
Étape 1 : Inclure sorttable.js
Créer une nouvelle page et copier la ligne suivante entre vos balise <head>.
<script src="/sorttable.js" type="text/javascript"></script>
Étape 2: HTML
Créer dans votre page une table et associer lui la classe "sortable" comme paramètre.
<table class="sortable"> ... </table>
Si dans votre page vous avez plus d'un tableau à trier, vous pouvez ajouter cette classe à tous les autres tableaux. Tous vos tableaux devront par contre avoir la même structure. C'est-à-dire, contenur une entête <thead>, un corps <tbody> ainsi qu'un pied de table <tfooter> comme l'exemple qui suit.
<table class="sortable">
<!-- Table Header -->
<thead>
<tr>
<th>Compagnie</th>
<th>Montant</th>
</tr>
</thead>
<!-- Tabel body-->
<tbody>
<tr>
<td>Apple Inc</td>
<td>10.00</td>
</tr>
<tr>
<td>GoogleInc</td>
<td>100.00</td>
</tr>
</tbody>
<!-- Tabel footer-->
<tfoot>
<tr>
<td>Total</td>
<td>110.00</td>
</tr>
</tfoot>
</table>
Lorsque vous cliquerez sur les entêtes, toutes les lignes entre les balises <tbody> seront alors trié en ordre croissant ou décroissant.
Étape 3: Générer les lignes de la table avec PHP
Vous pouvez générer les lignes de votre table avec des données provenant d'une table MySQL par exemple. C'est ici que PHP entre en oeuvre pour vous aidez. Voici donc un exemple en php :
<?php
// Connexion
include('dbconnection.php');
$getCompany_sql = 'SELECT * FROM COMPAGNIE';
$getCompany= mysql_query($getCompany_sql);
?>
<table class="sortable">
<!-- Table Header -->
<thead>
<tr>
<th>Compagnie</th>
<th>Montant</th>
</tr>
</thead>
<!-- Tabel body-->
<tbody>
<?php while ($row = mysql_fetch_array($getCompany)) {?>
<tr>
<th><?php echo $row.['compagnieNom'] ?></th>
<th><?php echo $row.['compagnieMontant'] ?></th>
</tr>
<?php } ?>
</tbody>
<!-- Tabel footer-->
<tfoot>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tfoot>
</table>
Rétrolien(0)
Adresse URI pour un rétrolien sur cet article
Commentaires
 |
