Tablesorter et entête sur 2 lignes

**sousoudu31** · 12/04/2010, 15h17

Bonjour à tous,

Afin de trier un tableau HTML j'utilise le plugin jquery Tablesorter qui est facilement configurable. Cependant afin d'améliorer la lisibilité de ce tableau, je souhaiterai ajouter une ligne à l'entête de mon tableau.

Avant :
CA 1M Total | CA 1M Souscriptions | CA 1M Renouvellement | CA 12M Total | CA 12M Souscriptions | CA 12M Renouvellement

Après:
1er ligne : ----------------CA 1 M--------------| ------------------- CA 12 M---------
2e ligne : Total | Souscriptions | Renouvellement | Total | Souscriptions | Renouvellement

Et apparemment Tablesorter n'est pas très content avec cet ajout. Connaitriez-vous un moyen de contourner cet inconvénient, sachant que je souhaite toujours trier en cliquant sur les entêtes de ma 2ème ligne?

Voici mes différents codes :

Le code HTML de départ :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<table>
		<thead>
			<tr>
				<th scope="col">Date</th>
				<th scope="col">CA 1M</th>
				<th scope="col">CA des souscriptions 1M</th>
				<th scope="col">CA des renouvellements 1M</th>
				<th scope="col">CA 12M</th>
				<th scope="col">CA des souscriptions 12M</th>
				<th scope="col">CA des renouvellements 12M</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">December 2009</th><td>636,60€</td><td>559,40€</td><td>553,40€</td><td>5 353,63€</td><td>5 593,30€</td><td>559,33€</td>
			</tr>
			<tr>
				<th scope="row">November 2009</th><td>335,60€</td><td>493,50€</td><td>533,50€</td><td>4 353,44€</td><td>4 433,34€</td><td>439,54€</td>
			</tr>
			<tr>
				<th scope="row">October 2009</th><td>336,50€</td><td>333,30€</td><td>433,30€</td><td>4 435,56€</td><td>4 353,44€</td><td>5 633,34€</td>
			</tr>
			<tr>
				<th scope="row">September 2009</th><td>656,90€</td><td>333,50€</td><td>433,30€</td><td>5 353,63€</td><td>5 033,94€</td><td>439,36€</td>
			</tr>
			<tr>
				<th scope="row">August 2009</th><td>333,50€</td><td>333,50€</td><td></td><td>4 393,60€</td><td>4 393,60€</td><td></td>
				</tr>
			<tr >
				<th scope="row">July 2009</th><td></td><td></td><td></td><td>5 633,34€</td><td>5 633,34€</td><td></td>
			</tr>
			<tr >
				<th scope="row">June 2009</th><td></td><td></td><td></td><td>5 393,40€</td><td>5 393,40€</td><td></td>
			</tr>
		</tbody>
	</table>

Le code HTML que je souhaite pouvoir utiliser :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<table>
		<thead>
			<tr>
				<th rowspan = "2">Date</th>
				<th colspan = "3">CA 1M</th>
				<th colspan = "3">CA 12M</th>
			</tr>
			<tr>
				<th scope="col">total</th>
				<th scope="col">souscriptions</th>
				<th scope="col">renouvellements 1M</th>
				<th scope="col">total</th>
				<th scope="col">souscriptions</th>
				<th scope="col">renouvellements</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">December 2009</th><td>636,60€</td><td>559,40€</td><td>553,40€</td><td>5 353,63€</td><td>5 593,30€</td><td>559,33€</td>
			</tr>
			<tr>
				<th scope="row">November 2009</th><td>335,60€</td><td>493,50€</td><td>533,50€</td><td>4 353,44€</td><td>4 433,34€</td><td>439,54€</td>
			</tr>
			<tr>
				<th scope="row">October 2009</th><td>336,50€</td><td>333,30€</td><td>433,30€</td><td>4 435,56€</td><td>4 353,44€</td><td>5 633,34€</td>
			</tr>
			<tr>
				<th scope="row">September 2009</th><td>656,90€</td><td>333,50€</td><td>433,30€</td><td>5 353,63€</td><td>5 033,94€</td><td>439,36€</td>
			</tr>
			<tr>
				<th scope="row">August 2009</th><td>333,50€</td><td>333,50€</td><td></td><td>4 393,60€</td><td>4 393,60€</td><td></td>
				</tr>
			<tr >
				<th scope="row">July 2009</th><td></td><td></td><td></td><td>5 633,34€</td><td>5 633,34€</td><td></td>
			</tr>
			<tr >
				<th scope="row">June 2009</th><td></td><td></td><td></td><td>5 393,40€</td><td>5 393,40€</td><td></td>
			</tr>
		</tbody>
	</table>

Et enfin mon script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
// Conversion des mois pour le plugin tablesorter
	var monthNames = {};
	monthNames["January"] = "01";
	monthNames["February"] = "02";
	monthNames["March"] = "03";
	monthNames["April"] = "04";
	monthNames["May"] = "05";
	monthNames["June"] = "06";
	monthNames["July"] = "07";
	monthNames["August"] = "08";
	monthNames["September"] = "09";
	monthNames["October"] = "10";
	monthNames["November"] = "11";
	monthNames["December"] = "12";
 
	// Ajout d'un format de date. Ex. : January 2008
	$.tablesorter.addParser({
	  id: 'monthYear',
	  is: function(s) {
		  return false;
	  },
	  format: function(s) {
		  var date = s.match(/^(\w+)[ ](\d{4})$/);
		  var m = monthNames[date[1]];
		  var y = date[2];
		  return '' + y + m + '01';
	  },
	  type: 'numeric'
	});
 
	$("table").addClass("tablesorter");
 
	//Il faut préciser le format de la 1ère colonne 
	$("table.tablesorter")
		.tablesorter({
			headers: {0:{sorter: 'monthYear'}},
			widgets: ['zebra']
		})
		.tablesorterPager({
			container: $("#pager"),
			positionFixed: false,
			size: 13 
		});

**danielhagnoul** · 12/04/2010, 23h27

Bonsoir.

J'obtiens la bonne disposition, mais il y a des erreurs de tri.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<tr>
	<th colspan = "2">Date</th>
	<th colspan = "3">CA 1M</th>
	<th colspan = "3">CA 12M</th>
</tr>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$("table.tablesorter").tablesorter({
	widgets: ['zebra'],
	headers: { 
		0:{sorter: false},
		1:{sorter: false},
		2:{sorter: false},
                // et la suite des colonnes triables avec le nom du parser
	}
});

**sousoudu31** · 13/04/2010, 10h07

Merci de ton aide, j'obtiens également une erreur de tri. Lorsque je clique sur les deux dernières colonnes, j'obtiens l'erreur parsers[i] is undefined. Je pense que tablesorter associe chaque élément <th> un par un à une des colonnes du <tbody> et que forcément sur la fin, il ne trouve aucune colonne à associé... Il faudrait pouvoir assigner le <th> que l'on veut à une colonne.

Après avoir cherché un bon petit moment, j'ai commencé à regarder d'autres solutions. Que penses-tu de Datatables. Le développement est encore d'actualité et il gère justement le problème que je rencontre. Cependant, je ne maîtrise pas encore la syntaxe qui me semble moins intuitive.

Edit: finalement après avoir lu différent sujet sur le forum de Datatables, et avoir lu différents code, je suis arrivé à mes fins. Ce plugin permet vraiment pas mal de choses bien sympatique

Tablesorter et entête sur 2 lignes

jQuery

Vue hybride

Discussions similaires

Partager

Partager