[PHP] trier un tableau dynamiquement [Sources]

**caro.** · 31/01/2006, 16h31

Bonjour a tous.

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.

**siddh** · 31/01/2006, 16h40

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

**caro.** · 31/01/2006, 16h44

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.

**siddh** · 31/01/2006, 16h50

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à

**caro.** · 31/01/2006, 16h53

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

**siddh** · 31/01/2006, 16h59

ce que je te propose c est de pas utiliser javascript justement

**franculo_caoulene** · 31/01/2006, 17h02

T'as le choix entre rediriger la page avec sur une url avec les paramètres de tri.

Code :

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

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 :

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

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.

**caro.** · 31/01/2006, 17h05

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

**caro.** · 31/01/2006, 17h05

très bien je vais faire comme ca.

Merci a tous les 2 en tout cas

**siddh** · 31/01/2006, 17h06

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

**caro.** · 31/01/2006, 17h15

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

Merci

**siddh** · 31/01/2006, 18h08

bon ça m'interresait

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

[PHP] trier un tableau dynamiquement [Sources]

JavaScript

Vue hybride

Discussions similaires

Partager

Partager