Tri de tableau HTML ( <table> )

Version imprimable

Un petit script pour trier un tableau html

Code:

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:

sortTable('matable',0,DESC)

paramètres de la fonction:

Code:

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...

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. :cry:

Code:

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>

18/01/2011, 09h00
SpaceFrog

:ccool: 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 ...
18/01/2011, 09h50
Auteur

bonjour Spacefrog,

une chose me surprend dans ton code :

Code:

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

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

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é :oops:
18/01/2011, 18h24
SpaceFrog

Code:

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]
18/01/2011, 20h20
danielhagnoul

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. :cry:

Bonsoir

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

Code:

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:

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]);
	}
}

20/01/2011, 09h08
vermine

Vous avez un supporter !

Merci à vous pour cet exercice collectif. :ccool:
20/01/2011, 09h55
le_chomeur

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 :)
20/01/2011, 14h19
SpaceFrog

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 .?
20/01/2011, 15h17
le_chomeur

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

Voici ma version, optimisable mais fonctionnelle :

Code:

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>

;)

Citation:

Envoyé par Lcf.vs

Voici ma version, optimisable mais fonctionnelle :

Code:

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 :ccool:

Encore une petite correction :

Code:

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>

Bonjour,

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

Citation:

...
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:

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:

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

08/11/2011, 11h43
Lcf.vs

Oui, en effet, cela résulte du remplacement des éléments liés à ma lib' par du minimaliste, désolé... :oops:
11/08/2012, 15h30
seb-65

Bonjour,

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

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

Code:

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
14/09/2012, 23h03
Lcf.vs

Simule le clic sur le th correspondant ;)
16/01/2014, 16h28
clemcraft

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