Fonction de tri hors balise TH de la table

**seb-65** · 11/08/2012, 23h32

Bonjour,

Le script JS permet de trier une table html :

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
 
function trieTable(tb, n) {
 
var iter = 0;
while (!tb.tagName || tb.tagName.toLowerCase()
!= "table") {
if (!tb.parentNode) return;
tb = tb.parentNode;
}
if (tb.tBodies && tb.tBodies[0]) tb = tb.tBodies[0];
 
/* Tri par sélection
 */
var reg = /^\d+(\.\d+)?$/g;
var index = 0, value = null, minvalue = null;
for (var i= tb.rows.length -1; i >= 0; i -= 1) {
minvalue
= value = null;
index = -1;
for (var j=i; j >= 0; j -= 1) {
value = tb.rows[j].cells[n].firstChild.nodeValue;
if (!isNaN(value)) value = parseFloat(value);
if
(minvalue == null || value < minvalue) { index = j; minvalue = value; }
}
 
if (index != -1) {
var row = tb.rows[index];
if (row) {
tb.removeChild(row);
tb.appendChild(row);
}}
 
}
}

Le trie ne fonctionne que si il est effectué/lancé depuis la balise TH de la table :

Code :

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

1
2
 
<th><a href="#" onclick="trieTable(this,0);">Ma Colonne</a></th>

Comment faire pour lancer le trie hors de la table par un bouton ou un lien dans la page ?

Merci

**headmax** · 12/08/2012, 00h33

Salut est-ce possible d'avoir toutes la partie html du table.
Merci

**seb-65** · 12/08/2012, 01h59

Salut,

Voici la table HTML qui utilise le JS :

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
 
<table>
<thead>
<tr>
<th><a href="#" onclick="trieTable(this,0);">Colonne 1</a></th>
<th><a href="#" onclick="trieTable(this,1);">Colonne 2</a></th>
<th><a href="#" onclick="trieTable(this,2);">Colonne 3</a></th>
</tr>
</thead>
<tbody>
<tr><td>Aaaa</td><td>5433</td><td>8.41</td></tr>
<tr><td>Bbbbb</td><td>45342</td><td>397.06</td></tr>
<tr><td>Abbccc</td><td>100</td><td>68.9</td></tr>
<tr><td>Cdefg</td><td>7</td><td>3.28</td></tr>
<tr><td>Zzzz</td><td>1</td><td>28.9</td></tr>
<tr><td>AZ</td><td>1893</td><td>9.97</td></tr>
</tbody>
</table>

**headmax** · 12/08/2012, 18h00

Faudra juste que tu rajoute des id au niveau des liens (a) pour ciblé cet élément pour provoqué le déclenchement avec le bonne élément (tb) html tel que tu l'a défini dans ta function au niveau du 1er paramètre.

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
 
<html>
<head>
<script type="text/javascript">
function trieTable(tb, n) {
	var iter = 0;
	while (!tb.tagName || tb.tagName.toLowerCase()
	!= "table") {
	if (!tb.parentNode) return;
	tb = tb.parentNode;
	}
	if (tb.tBodies && tb.tBodies[0]) tb = tb.tBodies[0];
 
	/* Tri par sélection
	 */
	var reg = /^\d+(\.\d+)?$/g;
	var index = 0, value = null, minvalue = null;
	for (var i= tb.rows.length -1; i >= 0; i -= 1) {
	minvalue
	= value = null;
	index = -1;
	for (var j=i; j >= 0; j -= 1) {
	value = tb.rows[j].cells[n].firstChild.nodeValue;
	if (!isNaN(value)) value = parseFloat(value);
	if
	(minvalue == null || value < minvalue) { index = j; minvalue = value; }
	}
 
	if (index != -1) {
	var row = tb.rows[index];
	if (row) {
	tb.removeChild(row);
	tb.appendChild(row);
	}}
 
	}
	}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th><a id="sortColum_1" href="#" onclick="trieTable(this,0);">Colonne 1</a></th>
<th><a id="sortColum_2" href="#" onclick="trieTable(this,1);">Colonne 2</a></th>
<th><a id="sortColum_3" href="#" onclick="trieTable(this,2);">Colonne 3</a></th>
</tr>
</thead>
<tbody>
<tr><td>Aaaa</td><td>5433</td><td>8.41</td></tr>
<tr><td>Bbbbb</td><td>45342</td><td>397.06</td></tr>
<tr><td>Abbccc</td><td>100</td><td>68.9</td></tr>
<tr><td>Cdefg</td><td>7</td><td>3.28</td></tr>
<tr><td>Zzzz</td><td>1</td><td>28.9</td></tr>
<tr><td>AZ</td><td>1893</td><td>9.97</td></tr>
</tbody>
</table>
<h1>Test avec lien</h1>
<a href="#" onclick="trieTable(document.getElementById('sortColum_1'),0);">Trie colonne1</a>
<a href="#" onclick="trieTable(document.getElementById('sortColum_2'),1);">Trie colonne2</a>
<a href="#" onclick="trieTable(document.getElementById('sortColum_3'),2);">Trie colonne3</a>
 
<h1>Test avec bouton</h1>
<input type="button" onclick="trieTable(document.getElementById('sortColum_1'),0);" value="trie colonne1"/>
<input type="button" onclick="trieTable(document.getElementById('sortColum_2'),1);" value="trie colonne2"/>
<input type="button" onclick="trieTable(document.getElementById('sortColum_3'),2);" value="trie colonne3"/>
</body>
</html>

J'ai mit des exemples sur des liens comme des boutons input..
Bonne chance, pense à mettre résolu dans le cas ou ça te convient comme réponse, ça fait toujours plaisir. A+

Fonction de tri hors balise TH de la table

JavaScript

Discussions similaires

Partager

Partager