Gérer des tableaux triables avec jquery
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’elements pour la pagination, donc la première page)
Utilisation de la pagination (2ème page):
Enjoy !
In: jQuery · Tagged with: jQuery, pagination, plugin, sorter, table, tableau, tablesorter, tabs, tri, triable