Trier vos tableaux HTML sans rafraichissement de la page avec Ajax

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="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">
   
   <thead>
      <tr>
         <th>Compagnie</th>
         <th>Montant</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Apple Inc</td>
         <td>10.00</td>
      </tr>
      <tr>
         <td>GoogleInc</td>
         <td>100.00</td>
      </tr>
   </tbody>
   
   <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">
   
   <thead>
      <tr>
         <th>Compagnie</th>
         <th>Montant</th>
      </tr>
   </thead>
   
   <tbody>
      <?php while ($row = mysql_fetch_array($getCompany)) {?>
         <tr>
            <th><?php echo $row.['compagnieNom'] ?></th>
            <th><?php echo $row.['compagnieMontant'] ?></th>
         </tr>
      <?php } ?>
   </tbody>
   
   <tfoot>
      <tr>
         <td>...</td>
         <td>...</td>
      </tr>
   </tfoot>
</table>