Tri de tableau HTML ( <table> )

**SpaceFrog** · 17/01/2011, 15h45

Un petit script pour trier un tableau html

Code HTML :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
input {width:100px;}
td {border: solid 1px black;
    
    width :80px;
    }
table {border-collapse: collapse;}
</style>
<title>Table sorter</title>
<script type='text/javascript'>
 
function DESC(a,b)
{
a=a[1]
b=b[1]
if(a > b)
      return -1
   if(a < b)
      return 1
   return 0
} 
 
function ASC(a,b){
a=a[1]
b=b[1]
if(a > b)
      return 1
   if(a < b)
      return -1
   return 0
 }
 
 
 
 
function sortTable(tid, col, ord){
mybody=document.getElementById(tid).getElementsByTagName('tbody')[0]
lines=mybody.getElementsByTagName('tr')
var sorter=new Array()
sorter.length=0
var i=-1;
while(lines[++i]){
sorter.push([lines[i],lines[i].getElementsByTagName('td')[col].innerHTML])
}
sorter.sort(ord)
j=-1
while(sorter[++j]){
mybody.appendChild(sorter[j][0])
}
 
}
</script>
</head>
 
<body>
<table id="matable">
	<tr>
		<td>a</td>
		<td>r</td>
	</tr>
	<tr>
		<td>b</td>
		<td>i</td>
	</tr>
	<tr>
		<td>c</td>
		<td>v</td>
	</tr>
	<tr>
		<td>d</td>
		<td>b</td>
	</tr>
	<tr>
		<td>e</td>
		<td>o</td>
	</tr>
	<tr>
		<td>f</td>
		<td>z</td>
	</tr>
		<tr>
		<td>1</td>
		<td>23</td>
	</tr>
		<tr>
		<td>10</td>
		<td>24</td>
	</tr>
		<tr>
		<td>2</td>
		<td>25</td>
	</tr>
 
	</table>	
	Alphabétique<br/>
	colonne 1<br/>
	<input type="button" onclick="sortTable('matable',0,DESC)" value="tri desc col 1" />
	<input type="button" onclick="sortTable('matable',0,ASC)" value="tri asc col1" /><br/>
	colonne 2<br/>
	<input type="button" onclick="sortTable('matable',1,DESC)" value="tri desc col2" />
	<input type="button" onclick="sortTable('matable',1,ASC)" value="tri asc col2" /><br/>
	<br/>
 
</body>
 </html>

Syntaxe d'utilisation:

Code :

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

sortTable('matable',0,DESC)

paramètres de la fonction:

Code :

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

 sortTable(tid, col, ord)

tid = id de la table
col = indexe de colonne à trier
ord= asc ou desc

Dans cette première version le tri est alphabétique uniquement

Je cherche un moyen d'intégrer le tri alpha numérique...

**danielhagnoul** · 18/01/2011, 00h22

Bonsoir

Voici, je crois que c'est correct, les trois solutions (alpha, num, alphanum) en asc et en desc.

Nota Bene : j'ai utilisé du jQuery bien entendu, mais cela ne change rien à ton code d'origine sauf pour le tri.

Nota Bene : le tri alpha ou alphanum ne fonctionne pas sur les caractères (minuscules ou majuscules) accentués.

Je pensais avoir trouvé la solution avec a[1].localeCompare(b[1]) mais cela ne fonctionne pas avec tous les navigateurs. Même avec Firefox il y a parfois des soucis avec Firebug alors que cette méthode est bien renseignée dans la documentation JavaScript de Mozilla.

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<table id="matable">
	<tbody>
		<tr>
			<td>a</td>
			<td>r</td>
		</tr>
		<tr>
			<td>b</td>
			<td>i</td>
		</tr>
		<tr>
			<td>c</td>
			<td>v</td>
		</tr>
		<tr>
			<td>d</td>
			<td>b</td>
		</tr>
		<tr>
			<td>e</td>
			<td>o</td>
		</tr>
		<tr>
			<td>f</td>
			<td>z</td>
		</tr>
			<tr>
			<td>1</td>
			<td>23</td>
		</tr>
			<tr>
			<td>10</td>
			<td>24</td>
		</tr>
			<tr>
			<td>2</td>
			<td>25</td>
		</tr>
	</tbody>
</table>
 
<div>
	<p>Alphabétique<br/>colonne 1</p>
	<input type="button" onclick="sortTable('matable',0, 'desc')" value="tri desc col 1" />
	<input type="button" onclick="sortTable('matable',0, 'asc')" value="tri asc col1" /><br/>
 
	<input type="button" onclick="sortTable('matable',0, 'ndesc')" value="tri num desc col 1" />
	<input type="button" onclick="sortTable('matable',0, 'nasc')" value="tri num asc col1" /><br/>
 
	<input type="button" onclick="sortTable('matable',0, '?desc')" value="tri alphanum desc col 1" />
	<input type="button" onclick="sortTable('matable',0, '?asc')" value="tri alphanum asc col1" />
 
	<p>colonne 2</p>
	<input type="button" onclick="sortTable('matable',1, 'desc')" value="tri desc col2" />
	<input type="button" onclick="sortTable('matable',1, 'asc')" value="tri asc col2" /><br/>
 
	<input type="button" onclick="sortTable('matable',1, 'ndesc')" value="tri num desc col2" />
	<input type="button" onclick="sortTable('matable',1, 'nasc')" value="tri num asc col2" /><br/>
 
	<input type="button" onclick="sortTable('matable',1, '?desc')" value="tri alphanum desc col2" />
	<input type="button" onclick="sortTable('matable',1, '?asc')" value="tri alphanum asc col2" />
</div>
 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
 
function sortTable(tid, col, ord){
	var mybody = $("#"+tid).children('tbody'),
		lines = mybody.children('tr'),
		sorter = [],
		i = -1,
		j = -1;
 
	while(lines[++i]){
		sorter.push([lines.eq(i), lines.eq(i).children('td').eq(col).text()])
	}
 
	if (ord == 'asc') {
		sorter.sort();
	} else if (ord == 'desc') {
		sorter.sort().reverse();
	} else if (ord == 'nasc'){
		sorter.sort(function(a, b){return(a[1] - b[1]);});
	} else if (ord == 'ndesc'){
		sorter.sort(function(a, b){return(b[1] - a[1]);});
	} else if (ord == '?asc'){
		sorter.sort(function(a, b){
			var x = parseInt(a[1], 10),
				y = parseInt(b[1], 10);
 
			if (isNaN(x) || isNaN(y)){
				if (a[1] > b[1]){
					return 1;
				} else if(a[1] < b[1]){
					return -1;
				} else {
					return 0;
				}
			} else {
				return(a[1] - b[1]);
			}
		});
	} else if (ord == '?desc'){
		sorter.sort(function(a, b){
			var x = parseInt(a[1], 10),
				y = parseInt(b[1], 10);
 
			if (isNaN(x) || isNaN(y)){
				if (a[1] > b[1]){
					return -1;
				} else if(a[1] < b[1]){
					return 1;
				} else {
					return 0;
				}
			} else {
				return(b[1] - a[1]);
			}
		});
	}
 
	while(sorter[++j]){
		mybody.append(sorter[j][0]);
	}
}
 
		$(function(){
		});
 	</script>
</body>  
</html>

**SpaceFrog** · 18/01/2011, 09h00

Daniel,

j'avais en effet fait des tests avec parseInt, *1 ...
j'avais juste zappé la différenciation isNaN du coup pour l'aphanum ça passait pas ...

**Auteur** · 18/01/2011, 09h50

bonjour Spacefrog,

une chose me surprend dans ton code :

Code :

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

mybody.appendChild(sorter[j][0])

alors que sorter est de type Array et ne contient que du texte

Du coup le appendChild() crée indirectement des champs texte ?
En plus quand on sait que appendChild() ajoute un élément et ne remplace pas un élément par un autre, j'avoue que quelque chose m'a échappé

**SpaceFrog** · 18/01/2011, 18h24

Code :

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

sorter.push([lines[i],lines[i].getElementsByTagName('td')[col].innerHTML])

si tu regardes bien, sorter est un array d'arrays

je push un array contenant le tr... et le innerHTML de la colone à trier

d'ou le sort sur le [1] et le append du [0]

**danielhagnoul** · 18/01/2011, 20h20

Bonsoir

Il y avait un petit bug dans le tri alphanum, un a au lieu d'un a[1] et idem pour le b.

[Edit]

Nota Bene : le tri alpha ou alphanum ne fonctionne pas sur les caractères (minuscules ou majuscules) accentués.

Je pensais avoir trouvé la solution avec a[1].localeCompare(b[1]) mais cela ne fonctionne pas avec tous les navigateurs. Même avec Firefox il y a parfois des soucis avec Firebug alors que cette méthode est bien renseignée dans la documentation JavaScript de Mozilla.

**danielhagnoul** · 20/01/2011, 00h11

Bonsoir

En combinant les efforts de chacun, voici une solution qui semble fonctionner pour les caractères accentués :

Code html :

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
<table id="matable">
	<tbody>
		<tr>
			<td>enchanteur</td>
			<td>réel</td>
		</tr>
		<tr>
			<td>échange</td>
			<td>indélicat</td>
		</tr>
		<tr>
			<td>en vrac</td>
			<td>véridique</td>
		</tr>
		<tr>
			<td>2.00</td>
			<td>23.25</td>
		</tr>
		<tr>
			<td>éparpiller</td>
			<td>bon</td>
		</tr>
		<tr>
			<td>échangiste</td>
			<td>échangeur</td>
		</tr>
		<tr>
			<td>enchanté</td>
			<td>Allo</td>
		</tr>
		<tr>
			<td>2.64</td>
			<td>23.02</td>
		</tr>
		<tr>
			<td>2.05</td>
			<td>23.00</td>
		</tr>
	</tbody>
</table>

Code javascript :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
/*
 * SPaceFrog
 * [RegExp]remplacement / suppression de caractères accentués ou autres ...
 * "http://www.developpez.net/forums/d1018129/webmasters-developpement-web/contribuez/regexp-remplacement-suppression-caracteres-accentues-autres/"
 */
function replaceSpec(Texte){
	var TabSpec = {"à":"a","á":"a","â":"a","ã":"a","ä":"a","å":"a","ò":"o","ó":"o","ô":"o","õ":"o","ö":"o","ø":"o","è":"e","é":"e","ê":"e","ë":"e","ç":"c","ì":"i","í":"i","î":"i","ï":"i","ù":"u","ú":"u","û":"u","ü":"u","ÿ":"y","ñ":"n","-":" ","_":" "},
		reg=/[àáâãäåòóôõöøèéêëçìíîïùúûüÿñ_-]/gi;
 
	return Texte.replace(reg, function(){
		return TabSpec[arguments[0].toLowerCase()];
	}).toLowerCase();
}
 
/*
 * Daniel Hagnoul
 * tri de tableau html
 * "http://www.developpez.net/forums/d1025830/webmasters-developpement-web/contribuez/tri-tableau-html/#post5718196"
 */
function sortTable(tid, col, ord){
	var mybody = $("#"+tid).children('tbody'),
		lines = mybody.children('tr'),
		sorter = [],
		i = -1,
		j = -1;
 
	while(lines[++i]){
		sorter.push([lines.eq(i), lines.eq(i).children('td').eq(col).text()])
	}
 
	if (ord == 'asc') {
		sorter.sort(function(a, b){
			var c1 = replaceSpec(a[1]),
				c2 = replaceSpec(b[1]);
 
			if (c1 > c2){
				return 1;
			} else if(c1 < c2){
				return -1;
			} else {
				return 0;
			}
		});
	} else if (ord == 'desc') {
		sorter.sort(function(a, b){
			var c1 = replaceSpec(a[1]),
				c2 = replaceSpec(b[1]);
 
			if (c1 > c2){
				return -1;
			} else if(c1 < c2){
				return 1;
			} else {
				return 0;
			}
		});
	} else if (ord == 'nasc'){
		sorter.sort(function(a, b){return(a[1] - b[1]);});
	} else if (ord == 'ndesc'){
		sorter.sort(function(a, b){return(b[1] - a[1]);});
	} else if (ord == '?asc'){
		sorter.sort(function(a, b){
			var x = parseInt(a[1], 10),
				y = parseInt(b[1], 10),
				c1 = replaceSpec(a[1]),
				c2 = replaceSpec(b[1]);
 
			if (isNaN(x) || isNaN(y)){
				if (c1 > c2){
					return 1;
				} else if(c1 < c2){
					return -1;
				} else {
					return 0;
				}
			} else {
				return(a[1] - b[1]);
			}
		});
	} else if (ord == '?desc'){
		sorter.sort(function(a, b){
			var x = parseInt(a[1], 10),
				y = parseInt(b[1], 10),
				c1 = replaceSpec(a[1]),
				c2 = replaceSpec(b[1]);
 
			if (isNaN(x) || isNaN(y)){
				if (c1 > c2){
					return -1;
				} else if(c1 < c2){
					return 1;
				} else {
					return 0;
				}
			} else {
				return(b[1] - a[1]);
			}
		});
	}
 
	while(sorter[++j]){
		mybody.append(sorter[j][0]);
	}
}

**vermine** · 20/01/2011, 09h08

Merci à vous pour cet exercice collectif.

**le_chomeur** · 20/01/2011, 09h55

Waou po mal

dite ça ne vous dirait pas de rendre la fonction de tri générique et d'externalisé la génération des lignes du tableau ??

Moi j'dis ça , je ne dis rien hein ^^

[EDIT]

Mes excuses je n'avais pas vu le post juste en dessous

**SpaceFrog** · 20/01/2011, 14h19

le but n'est pas de générer des lignes ...
mais de trier des lignes existantes ...

quel serait le but de la génération .?

**le_chomeur** · 20/01/2011, 15h17

Pardon je me suis mal exprimé :

- Je pensais effectivement a la fonction de tri autonome

Spaffy : je suis pt bientôt de retour !!! t'expliquerais en MP

**Lcf.vs** · 14/08/2011, 10h30

Voici ma version, optimisable mais fonctionnelle :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Table natsorter</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			table{
				border-collapse:collapse;
			}
			th{
				background-color:grey;
				color:white;
			}
			th,td{
				border:solid 1px black;
				width :80px;
			}
		</style>
	</head>
	<body>
		<table id="matable">
			<tr>
				<th>col1</th>
				<th>col2</th>
			</tr>
			<tr>
				<td>a</td>
				<td>5</td>
			</tr>
			<tr>
				<td>b</td>
				<td>2</td>
			</tr>
			<tr>
				<td>c</td>
				<td>4</td>
			</tr>
			<tr>
				<td>d</td>
				<td>1</td>
			</tr>
			<tr>
				<td>É</td>
				<td>0.1</td>
			</tr>
			<tr>
				<td>e</td>
				<td>3</td>
			</tr>
			<tr>
				<td>é</td>
				<td>10</td>
			</tr>
			<tr>
				<td>è</td>
				<td>1.01</td>
			</tr>
		</table>
		<script type='text/javascript'>
			function natsortTable(table){
				var heads,i=-1;
				table.onclick=function(event){
					var col=event.target;
					if(col.tagName=='TH'){
						var rowSelector=this.rows[0].getElementsByTagName('th')==null?1:0;
						var cols=this.rows[rowSelector].getElementsByTagName('th'),i=-1,j=0,k,elements=[],temp,node,results=[],current;
						while(cols[++i]!=col){}
						while(this.rows[++j]){
							node=this.rows[j].getElementsByTagName('td')[i];
							if(!node.hasOwnProperty('encodedValue')){
								k=-1;
								node.encodedValue=[];
								while(node.innerHTML[++k]){
									node.encodedValue.push(node.innerHTML.charCodeAt(k));
								}
							}
							elements.push(node);
						}
						i=0;
						results[0]=elements[0];
						while(elements[++i]){
							j=0;
							current=elements[i];
							while(current){
								k=-1;
								if(results[j]){
									if(!isNaN(current.innerHTML)&&!isNaN(results[j].innerHTML)){
										if(Number(current.innerHTML)<Number(results[j].innerHTML)){
											temp=results[j]||false;
											results[j]=current;
											current=temp;
										}
									}
									else if(current==elements[i]){
										if(current.encodedValue.length>=results[j].encodedValue.length){
											if(current.encodedValue.length==results[j].encodedValue.length){
												while(current==elements[i]&&current.encodedValue[++k]){
													if(current.encodedValue[k]<results[j].encodedValue[k]){
														temp=results[j]||false;
														results[j]=current;
														current=temp;
													}
													else if(current.encodedValue[k]>results[j].encodedValue[k]){
														k=current.encodedValue.length;
													}
												}
											}
										}
									}
									else{
										temp=results[j]||false;
										results[j]=current;
										current=temp;
									}
									j++;
								}
								else{
									results[j]=current;
									current=false;
								}
							}
						}
						if(col.ord=='DESC'){
							col.ord='ASC';
						}
						else{
							col.ord='DESC';
							results.reverse();
						}
						i=-1;
						node=this.getElementsByTagName('tbody')[0]||this;
						while(results[++i]){
							node.appendChild(results[i].parentNode);
						}
					}
				};
				heads=table.getElementsByTagName('th');
				while(heads[++i]){
					heads[i].ord='DESC';
				}
			}
			// Application de natsortTable à un tableau
			natsortTable(document.getElementById('matable'));
		</script>
	</body>
</html>

**beegees** · 14/08/2011, 10h52

Envoyé par Lcf.vs

Voici ma version, optimisable mais fonctionnelle :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Table natsorter</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			table{
				border-collapse:collapse;
			}
			th{
				background-color:grey;
				color:white;
			}
			th,td{
				border:solid 1px black;
				width :80px;
			}
		</style>
	</head>
	<body>
		<table id="matable">
			<tr>
				<th>col1</th>
				<th>col2</th>
			</tr>
			<tr>
				<td>a</td>
				<td>5</td>
			</tr>
			<tr>
				<td>b</td>
				<td>2</td>
			</tr>
			<tr>
				<td>c</td>
				<td>4</td>
			</tr>
			<tr>
				<td>d</td>
				<td>1</td>
			</tr>
			<tr>
				<td>É</td>
				<td>0.1</td>
			</tr>
			<tr>
				<td>e</td>
				<td>3</td>
			</tr>
			<tr>
				<td>é</td>
				<td>10</td>
			</tr>
			<tr>
				<td>è</td>
				<td>1.01</td>
			</tr>
		</table>
		<script type='text/javascript'>
			function natsortTable(table){
				var heads,i=-1;
				table.onclick=function(event){
					var col=event.target;
					if(col.tagName=='TH'){
						var cols=this.rows[0].getElementsByTagName('th'),i=-1,j=0,k,elements=[],temp,node,results=[],current;
						while(cols[++i]!=col){}
						while(this.rows[++j]){
							node=this.rows[j].getElementsByTagName('td')[i];
							if(!node.hasOwnProperty('encodedValue')){
								k=-1;
								node.encodedValue=[];
								while(node.innerHTML[++k]){
									node.encodedValue.push(node.innerHTML.charCodeAt(k));
								}
							}
							elements.push(node);
						}
						i=0;
						results[0]=elements[0];
						while(elements[++i]){
							j=0;
							current=elements[i];
							while(current){
								k=-1;
								if(results[j]){
									if(!isNaN(current.innerHTML)&&!isNaN(results[j].innerHTML)){
										if(Number(current.innerHTML)<Number(results[j].innerHTML)){
											temp=results[j]||false;
											results[j]=current;
											current=temp;
										}
									}
									else if(current==elements[i]){
										if(current.encodedValue.length>=results[j].encodedValue.length){
											if(current.encodedValue.length==results[j].encodedValue.length){
												while(current==elements[i]&&current.encodedValue[++k]){
													if(current.encodedValue[k]<results[j].encodedValue[k]){
														temp=results[j]||false;
														results[j]=current;
														current=temp;
													}
													else if(current.encodedValue[k]>results[j].encodedValue[k]){
														k=current.encodedValue.length;
													}
												}
											}
										}
									}
									else{
										temp=results[j]||false;
										results[j]=current;
										current=temp;
									}
									j++;
								}
								else{
									results[j]=current;
									current=false;
								}
							}
						}
						if(col.ord=='DESC'){
							col.ord='ASC';
						}
						else{
							col.ord='DESC';
							results.reverse();
						}
						i=-1;
						node=this.getElementsByTagName('tbody')[0]||this;
						while(results[++i]){
							node.appendChild(results[i].parentNode);
						}
					}
				};
				heads=table.getElementsByTagName('th');
				while(heads[++i]){
					heads[i].ord='DESC';
				}
			}
			// Application de natsortTable à un tableau
			natsortTable(document.getElementById('matable'));
		</script>
	</body>
</html>

Testé, très bon code

**Lcf.vs** · 23/08/2011, 14h01

Encore une petite correction :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Table natsorter</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			table{
				border-collapse:collapse;
			}
			th{
				background-color:grey;
				color:white;
			}
			th,td{
				border:solid 1px black;
				width :80px;
			}
		</style>
	</head>
	<body>
		<table id="matable">
			<tr>
				<th>col1</th>
				<th>col2</th>
			</tr>
			<tr>
				<td>a</td>
				<td>5</td>
			</tr>
			<tr>
				<td>b</td>
				<td>2</td>
			</tr>
			<tr>
				<td>c</td>
				<td>4</td>
			</tr>
			<tr>
				<td>d</td>
				<td>1</td>
			</tr>
			<tr>
				<td>É</td>
				<td>0.1</td>
			</tr>
			<tr>
				<td>e</td>
				<td>3</td>
			</tr>
			<tr>
				<td>é</td>
				<td>10</td>
			</tr>
			<tr>
				<td>è</td>
				<td>1.01</td>
			</tr>
		</table>
		<script type='text/javascript'>
			function natsortTable(table){
				var heads,i=-1;
				table.onclick=function(event){
					var col=event.target;
					if(col.tagName=='TH'){
						var rowSelector=this.rows[0].getElementsByTagName('th')==null?1:0;
						var cols=this.rows[rowSelector].getElementsByTagName('th'),i=-1,j=0,k,elements=[],temp,node,results=[],current;
						while(cols[++i]!=col){}
						while(this.rows[++j]){
							node=this.rows[j].getElementsByTagName('td')[i];
							if(!node.hasOwnProperty('encodedValue')){
								k=-1;
								node.encodedValue=[];
								while(node.innerHTML[++k]){
									node.encodedValue.push(node.innerHTML.charCodeAt(k));
								}
							}
							elements.push(node);
						}
						i=0;
						results[0]=elements[0];
						while(elements[++i]){
							j=0;
							current=elements[i];
							while(current){
								k=-1;
								if(results[j]){
									if(!isNaN(current.innerHTML)&&!isNaN(results[j].innerHTML)){
										if(Number(current.innerHTML)<Number(results[j].innerHTML)){
											temp=results[j]||false;
											results[j]=current;
											current=temp;
										}
									}
									else if(current==elements[i]){
										if(current.encodedValue.length>=results[j].encodedValue.length){
											if(current.encodedValue.length==results[j].encodedValue.length){
												while(current==elements[i]&&current.encodedValue[++k]){
													if(current.encodedValue[k]<results[j].encodedValue[k]){
														temp=results[j]||false;
														results[j]=current;
														current=temp;
													}
													else if(current.encodedValue[k]>results[j].encodedValue[k]){
														k=current.encodedValue.length;
													}
												}
											}
										}
									}
									else{
										temp=results[j]||false;
										results[j]=current;
										current=temp;
									}
									j++;
								}
								else{
									results[j]=current;
									current=false;
								}
							}
						}
						if(col.ord=='DESC'){
							col.ord='ASC';
						}
						else{
							col.ord='DESC';
							results.reverse();
						}
						i=-1;
						node=this.getElementsByTagName('tbody')[0]||this;
						while(results[++i]){
							node.appendChild(results[i].parentNode);
						}
					}
				};
				i=-1;
				heads=table.getElementsByTagName('th');
				while(heads[++i]){
					heads[i].ord='DESC';
				}
			}
			// Application de natsortTable à un tableau
			natsortTable(document.getElementById('matable'));
		</script>
	</body>
</html>

**BaBeuH** · 08/11/2011, 11h22

Bonjour,

On va dire que je cherche la p'tite bête, mais si je peux me permettre, le script est un peu intrusif :

...
table.onclick=function(event){
...

Supposons qu'il y ait déjà un script également intrusif présent sur la page et qui attache une autre fonction à l'évènement "click" de la table, soit le tri ne fonctionne plus, soit c'est l'autre script...

Je suppose que le but du script était essentiellement le tri, mais tant qu'à le faire, autant faire propre, non ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function addEvent(obj,event,fct) {
   if (obj.attachEvent)
      obj.attachEvent('on' + event,fct);
   else obj.addEventListener(event,fct,true);
}
 
function removeEvent(obj,event,fct) {
   if (obj.detachEvent)
      obj.detachEvent('on'+event,fct);
   else obj.removeEventListener(event,fct,true);
}
...
addEvent(table,"click",function(event){
...

et idéalement aussi :

Code :

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

1
2
3
addEvent(window,"load",function(event){
   natsortTable(document.getElementById('matable'));
}

A+

**Lcf.vs** · 08/11/2011, 11h43

Oui, en effet, cela résulte du remplacement des éléments liés à ma lib' par du minimaliste, désolé...

**seb-65** · 11/08/2012, 15h30

Bonjour,

J'essaye d'utiliser le code Lcf.vs...

Je voudrais pouvoir passer à la fonction natsortTable le numéro de colonne à trier :

Code :

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

natsortTable(document.getElementById('matable','2'));

Comment faire pour arriver à un résultat de trie suivant le numéro de colonne passé en paramètre ?

Merci

**Lcf.vs** · 14/09/2012, 23h03

Simule le clic sur le th correspondant

**clemcraft** · 16/01/2014, 16h28

Bonjour, je voudrais savoir si il est possible d'utiliser le code de Lcf.vs uniquement sur un tbody particulier ?
merci d'avance

Tri de tableau HTML ( <table> )

Contribuez

Discussions similaires

Partager

Partager