Trier les colonnes d'un tableau avec sorttable

Ce n'est pas très difficile à réaliser pour un résultat très sympa. Ce script va permettre à vos visiteurs de trier, sur votre blog, les colonnes d'un tableau

Attendez le chargement complet de la page, et donc des fichiers, testez en cliquant sur les titres des colonnes.

Prénom	Année	Nombre de points	Position
Anne Laure	1980	158	3
Margot	1938	256	2
Béatrice	2005	457	4
Huguette	2001	58	1

Première étape :

Allez sur Kryogenix

Cliquez sur Download the Javascript library

Copiez le contenu de la page qui apparaît

Deuxième étape :

Ouvrez votre Bloc Note sur votre PC
Collez et sauvegardez ce contenu sous sorttable.js

Troisième étape :

Allez dans l'Administration de votre blog - Mes documents - Autres Fichiers :

• créez un répertoire nommé sorttable
  
• enregistrez-y le fichier sorttable.js
  
• notez son adresse
  

Quatrième étape :

Lors de la rédaction de votre article, en HTML, vous collez

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/sorttable/sorttable.js"></script>

En rouge, l'adresse de votre fichier. Vous l'avez noté à la troisième étape.

Ensuite, vous créez normalement votre tableau. Si votre éditeur ne le permet pas, regardez cet article. Quand il est achevé, vous allez en HTML.

Vous rajoutez ce qui est en rouge et votre tableau est opérationnel.

<table width="100%" cellspacing="1" cellpadding="1" border="1" align="center" class="sortable">
    <tbody>
        <tr>
            <td bgcolor="#2f3343" align="center"><font color="#ffffff">Pr&#233;nom</font></td>
            <td bgcolor="#2f3343" align="center"><font color="#ffffff">Ann&#233;e</font></td>
            <td bgcolor="#2f3343" align="center"><font color="#ffffff">Nombre de points</font></td>
            <td bgcolor="#2f3343" align="center"><font color="#ffffff">Position</font></td>
        </tr>
        <tr>
            <td>Anne Laure</td>
            <td align="center">1980</td>
            <td align="center">158</td>
            <td align="center">3</td>
        </tr>
        <tr>
            <td>Margot</td>
            <td align="center">1938</td>
            <td align="center">256</td>
            <td align="center">2</td>
        </tr>
        <tr>
            <td>B&#233;atrice</td>
            <td align="center">2005</td>
            <td align="center">457</td>
            <td align="center">4</td>
        </tr>
        <tr>
            <td>Huguette</td>
            <td align="center">2001</td>
            <td align="center">58</td>
            <td align="center">1</td>
        </tr>
    </tbody>
</table>