Tutoriaux

Trier vos tableaux HTML sans rafraichissement de la page

Administrateur

Mar 06 |04:13

Mise à jour le Mardi, 13 Mai 2008 12:14

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>.

Étape 2: HTML

Créer dans votre page une table et associer lui la classe "sortable" comme paramètre.

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>

Envoyer par mail

Vu: 5316

Commentaires (12) Add Comment

Flux RSS pour les commentaires

et en asp
Par romaine , mai 11, 2009

Je n'arrive pas à traduire ton code pour le mettre en asp ...
j'ai besoin de ce tri.
D'autant plus que j'arrive à le faire marché quand je rentre mais donnée en dur mais pas quand elles sont issue de ma Bd

merci