Août
8

Tablesorter : Nouvelles fonctionnalités

Depuis quelques jours, j’utilise tablesorter et je me suis rendu compte au fur et à mesure des mes besoins que la version téléchargeable sur leur site n’était pas vraiment à jour (2.0.5)!

En effet, il existe une version beaucoup plus récente (2.0.11) ici et qui apporte son lots de nouveautés dont 2 dont j’ai eu besoin justement :

1) Prise en compte des rowspans pour le tri

En effet, si vous avez un tableau avec des lignes qui contiennent des rowspans, vous verrez que si vous avez une vieille version, lorsque vous trierez un colonne, votre tableau ne ressemblera plus à rien

La solution est simple, il suffit de mettre une classe sur les lignes enfants, par défaut la classe est "expand-child".Vous pouvez bien entendu mettre la classe que vous voulez en la parametrant via l’option cssChildRow

$("#tablesorter-demo").tablesorter({cssChildRow : 'maClasseEnfant'});
<table id="tablesorter-demo" border="1" width="100%">
<thead>
<tr>
<th>Item #</th>
<th>Name</th>
<th>Available</th>
</tr>
</thead>
<tbody>
<tr>
<td>12345</td>
<td>Toy Car</td>
<td>5</td>
</tr>
<tr class="maClasseEnfant"> <!-- Cette ligne est rattaché à la ligne du dessus, donc ne sera pas prise en compte dans le tri -->
<td colspan="3">
        It's a toy car!</td>
</tr>
<tr>
<td>23456</td>
<td>Toy Plane</td>
<td>2</td>
</tr>
<tr class="maClasseEnfant"> <!--Cette ligne est rattaché à la ligne du dessus, donc ne sera pas prise en compte dans le tri -->
<td colspan="3">
        It's a toy plane!</td>
</tr>
<tr class="maClasseEnfant"> <!-- Cette ligne est aussi rattaché à la ligne du dessus, donc ne sera pas prise en compte dans le tri  non plus-->
<td colspan="3">
        and it flies!</td>
</tr>
</tbody>
</table>

2) Prise en compte du changement de page (plugin de pagination à mettre à jour aussi)

2 événements ont été rajouté dans les dernières versions, un événement avant le changement de page et un autre pour la fin de chargement de la page

$("#listfor").tablesorter({
		dateFormat: 'uk',
		headers: {
			0: {sorter: "shortDate"},
			6: {sorter: false}
			},
		widgets: ['zebra'],
			sortList: [[0,1]]
		})
		.tablesorterPager({container: $("#pager"), size:2})
				// bind to pager events
		.bind('pagerComplete', function(e,c){
			    	//Ici ce que vous voulez faire à la fin du chargement de la page
		});

Vous trouverez le reste de la documentation manquante sur les nouvelles fonctionnalités sur cette page



2 Comments to “Tablesorter : Nouvelles fonctionnalités”

  • Le Taulier 26 mars 2012 à 20 h 13 min

    Bonjour Appo et Nico!

    Je ne suis pas programmeur, j’ai juste un blog sur Blogger et j’ai une question qui va peut-être vous paraitre conne. Est-ce qu’on peut installer Tablesorter sur un blog puisque « tout se fait du côté client »?

    J’ai essayé de trouve un didacticiel en français mais je n’ai rien trouvé.

    Sinon votre blog est sympa!

  • Appo 26 mars 2012 à 20 h 37 min

    Bonjour et merci pour le compliment,

    En effet, comme c’est du javascript cela se fait du coté client, mais il faut télécharger le fichier javascript correspondant afin de le mettre dans les fichiers sources du site. Il faut aussi que Jquery soit installé.
    Enfin, il faut coder quelques lignes de javascript pour rendre vos tableaux triables.
    Si vous n’avez pas accès aux sources de votre blog, vous ne pourrez probablement pas utiliser de Javascript sur votre blog sauf s’il existe un module blogger pour le faire.

Poster un commentaire

Edito

Bienvenue sur Mémorandom.

Mémorandom est le blog de 2 développeurs web, Appo et Nico.

Vous y trouverez des informations sur différents domaines touchant de près ou de loin au développement web

Tutoriels Yii Framework

Nos derniers articles

Blogs Dev

Liens

Étiquettes