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="http://www.pckult.net/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>
Jeu de briques
Snake
Pacman
Bubble
LES COMMENTAIRES (7)
posté le 24 mars à 14:58
Dommage qu'il n'y ai pas un petit exemple du rendu pour les néophyte comme moi (qui m'éviterait de passer 2 heures pour un résultat incertain au vu de mes capacités) Merci en tout cas
posté le 06 juillet à 15:26
J'ai trouvé c'est du au symbole € ;-)
Merci !
posté le 06 juillet à 15:13
Moi, j'ai un souci... comme par exemple, il trie: 1007.60 € 102.96 € 114.40
Comme si il ne prends en compte que les trois premier chiffre.
Une idée du pourquoi ?
Merci,
posté le 19 mars à 12:19
Alors là genial, simple et efficace même avec des tableaux monstrueux
posté le 03 septembre à 11:29
Ca fonctionne impec, merci ! :)
posté le 03 septembre à 11:29
Ca fonctionne impec, merci ! :)