[PHP] trier un tableau dynamiquement

Version imprimable

31/01/2006, 15h31
caro.

[PHP] trier un tableau dynamiquement

Bonjour a tous. :D

J'ai un petit probleme. J'ai dans ma page html un tableau basique.
Je souhaiterais pouvoir mettre un lien sur mes colonnes afin de trier dynamiquement les colonnes.

Je ne souhaiterais pas passé par un webservice pour faire ceci.

Je pense que ma solution serait d'utiliser du javascript. Mais je débute en javascript. Si vous aviez une petite idée.

Merci beaucoup. :wink:
31/01/2006, 15h40
siddh

Je me demande si ca serais quand meme pas plus simple pour toi de les trier en php en repostant ta page en indiquant le sens de tri ?
Comme ça le tri se fera en sql ;)
31/01/2006, 15h44
caro.

justement je voudrais que l'utilisateur puisse avoir le choix de trier sur la colonne qu'il veut.

donc de trier directement dans la page php ne me convient pas.
31/01/2006, 15h50
siddh

8O je vois pas ou ets le probleme, sauf si tu ne prend pas tes données dans la base ...

car sinon en cliquant sur la colonne, on recharge la page en passant le nom de la colonne et hop en sql on fais un order by sur cette colonne là
31/01/2006, 15h53
caro.

Ce que tu me proposes comme solution me conviendrais effectivement très bien.

Mais le probleme c'est que je sais pas comment m'y prendre en javascript.

donc si tu avais un petit exemple pour me faire voir ca serait super sympa ;)

Merci en tout cas pour ton aide
31/01/2006, 15h59
siddh

ce que je te propose c est de pas utiliser javascript justement 8O
31/01/2006, 16h02
franculo_caoulene
T'as le choix entre rediriger la page avec sur une url avec les paramètres de tri.

Code:

document.location.href='mapage.php?col=col1&ordre=asc

La colonne est celle que tu souhaites trier et ordre est "descendant" ou "ascendant". Tu changes la valeur selon le tri actuel de la page.

Sinon tu fais exactement la même chose mais avec un formulaire caché (input type="hidden") et dans ton lien une fonction faisant grosso modo
Code:

1 2 3 document.monForm.col.value = "col1"; document.monForm.ordre.value = "asc"; document.monForm.submit();
C'est juste une piste faite en direct.

Le reste est en PHP.
31/01/2006, 16h05
caro.

désolé j'avais pas compris.
J'ai un peu de mal.

Donc ok en faite tu me dit de recharger ma page en passant en paramètre la colonne a trier??

Ca ne sera pas trop long en temps de rechargement???

Il vaut donc mieux traiter ca en php qu'a l'aide d'une fonction javascript alors??
31/01/2006, 16h05
caro.

très bien je vais faire comme ca.

Merci a tous les 2 en tout cas ;)
31/01/2006, 16h06
siddh

ben c est toi qui voit mais en javascript ca va etre beaucoup plus complexe car naviguer dans les colonnes d'une table est beaucoup moins facile que de naviguer dans des lignes
31/01/2006, 16h15
caro.

je vais jouer la carte de la prudence et tester avec ton idée.

Merci ;)

bon ça m'interresait ;)

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
 
<html>
	<head>
		<title>Trier des colonnes</title>
		<style type='text/css'>
			table{
				width: 50%;
				text-align: center;
			}
		</style>
		<script type='text/javascript'>
			function tri_asc(a,b){
				if(a.value > b.value)
					return 1;
				else if (a.value < b.value)
					return -1;
				else
					return 0;
			}
			function tri_desc(a,b){
				return tri_asc(a,b) * -1;
			}
			window.onload=function(){
				var tb = document.getElementById('matable');
				var ths = tb.getElementsByTagName('th');
				window.rows = tb.getElementsByTagName('tr');
				window.states = new Array();
				for(var i=0;i<ths.length;i++){
					ths[i].name = String(i);
					window.states[i] = "desc";
					ths[i].onclick = function(){
						var index = parseInt(this.name,10);
						var sortMeth = tri_asc;
						if(window.states[index] == "desc"){
							window.states[index] = "asc";
						}
						else{
							window.states[index] = "desc";
							sortMeth = tri_desc;
						}
 
						var tabToSort = new Array();
 
						while(window.rows.length>1){
							var val = window.rows[1].childNodes[index].firstChild.nodeValue;
							tabToSort[tabToSort.length] = {row: window.rows[1].parentNode.removeChild(window.rows[1]),value: val};
						}
						tabToSort.sort(sortMeth);
						for(var j=0;j<tabToSort.length;j++){
							window.rows[0].parentNode.appendChild(tabToSort[j].row);
						}
					}
				}
			}
		</script>
	</head>
	<body>
	<table id="matable">
		<tr>
			<th>Col 1</th>
			<th>Col 2</th>
			<th>Col 3</th>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
			<td>02</td>
		</tr>
		<tr>
			<td>d</td>
			<td>c</td>
			<td>04</td>
		</tr>
		<tr>
			<td>e</td>
			<td>f</td>
			<td>10</td>
		</tr>
		<tr>
			<td>g</td>
			<td>a</td>
			<td>01</td>
		</tr>
	</table>
	</body>
</html>

par contre je fais un tri alphabétique, du coup si tu as une colonne numérique, il faut mettre des 0 devant les chiffres pour éviter par exemple que 10 se retrouve devant 2 ;)

Quand tu click ca tri ascendant, si tu reclick ca tri descendant.

Apres il te suffit de mettre un pointeur spécifique en css par exemple pour bien voir qu'on peut clicker sur les entete de colonne