Ghaundan Dév Lab

Vous souhaitez présenter vos données sur un site web, de manière à ce que celles ci soient lisibles, triables et facilement mises en forme ?

Pour gérer vos listes, plusieurs moyens sont possibles. L’un d’entre eux consiste à utiliser un plugin jquery fantastique de beauté et de simplicité: tablesorter. (Même le nom est facile à retenir *_*)

Avec tablesorter, on peut faire des listes triables au clic, ou automatiquement. Pour transformer une liste en tablesorter, rien de plus facile ! Il suffit de lancer un simple

$("table").tableSorter();

Et en plus vous pouvez ajouter un module de pagination sur vos tables tablesorter-ées ! il suffit de chainer les fonctions jquery

$("table")
    .tablesorter()
    .tablesorterPager({container: $("#divPager")});

(l’element div divPager étant construit comme ceci:)

<div id="pager" style="top: 606px; position: absolute;">
    <form>
        <img src="../addons/pager/icons/first.png">
        <img src="../addons/pager/icons/prev.png">
        <input type="text">
        <img src="../addons/pager/icons/next.png">
        <img src="../addons/pager/icons/last.png">
        <select>
            <option value="10" selected="selected">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
        </select>
    </form>
</div>

A quoi ressemble un tableau trié avec tablesorter ?

Un exemple de tableau vide avec une pagination (donc un pager en bas du tableau)

Un tableau rempli: (trop d’éléments pour la pagination, donc la première page)

Utilisation de la pagination (2ème page):

Enjoy !

(Images issues du jeu libre Ryzom)