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.

Tri de tableau HTML ( <table> )

Contribuez

Vue hybride

Discussions similaires

Partager

Partager