[JavaScript] 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

Citation:

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 :

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 :

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

18/01/2011, 09h00	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 844 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 844 Points : 51 433 Points : 51 433	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 ... __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

18/01/2011, 18h24	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 844 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 844 Points : 51 433 Points : 51 433	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] __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

20/01/2011, 09h08	#8
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 3 996 Détails du profil Informations personnelles : Âge : 28 Informations forums : Inscription : mars 2008 Messages : 3 996 Points : 27 756 Points : 27 756	Vous avez un supporter ! Merci à vous pour cet exercice collectif. __________________ Médias : influence, pouvoir et fiabilité - Découvrez MooTools - Le mathématicien et ses esclaves Elen Poukram - Isegoria - Sandawe
	00

20/01/2011, 09h55	#9
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 612 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 612 Points : 4 389 Points : 4 389	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 __________________ est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes Premier ministre du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts )*
	00

20/01/2011, 14h19	#10
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 844 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 844 Points : 51 433 Points : 51 433	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 .? __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

18/01/2011, 09h50	#4
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 5 158 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 5 158 Points : 5 605 Points : 5 605	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é
	00

18/01/2011, 20h20	#6
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 848 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 848 Points : 14 346 Points : 14 346	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. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

20/01/2011, 15h17	#11
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 612 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 612 Points : 4 389 Points : 4 389	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 __________________ est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes Premier ministre du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts )*
	00

11/08/2012, 15h30	#17
seb-65 Candidat au titre de Membre du Club Inscription : juillet 2009 Messages : 174 Détails du profil Informations forums : Inscription : juillet 2009 Messages : 174 Points : 14 Points : 14	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email