Commande de tri d'un tableau

**moimp** · 01/12/2017, 21h40

Bonjour,
J'ai un tableau de données issues d'une bdd.
Je voudrais permettre à l'utilisateur de trier le tableau en cliquant sur la tête de colonne (exemple par noms, par prénoms, par âges) comme dans l'explorateur Windows ou dans phpMyAdmin.
1-Comment faire pour mettre des petites flèches et les retourner (croissant ou décroissant) à chaque clic sur une tête de colonne?
2-Peut-on le faire en php (en rechargeant la page à chaque fois) ou faut-il le faire avec JavaScript?

Toutes mes recherches ont débouché sur les fonctions de tri mais aucune sur ce point.

Invité · 01/12/2017, 22h48

Bonjour,

"dataTable"

**moimp** · 17/01/2018, 11h59

Bonjour,
Après avoir laissé ce sujet quelques temps en suspens, je reviens dessus. J'ai donc tenter de me documenter sur dataTable.
Le sujet est touffu, je trouve des infos anciennes (10 ans ou plus) et j'ai du mal à m'y retrouver. Néanmoins, j'ai réussi à télécharger dataTable et là je ne sais pas par où commencer, d'autant que je n'ai jamais utiliser jquery.
Etape 1: En php, je collecte les données non triées et non filtrées à partir de ma bdd.
Etape 2: Je crée une variable json à transmettre à dataTable.
Etape 3: Je coince !

**Geoffrey74** · 17/01/2018, 12h54

Hello,

tu peux gérer soit en PHP, mais c'est lourd avec des rechargements de page à chaque fois, soit en js, regarde du côté de tablesorter tu as des scripts tout prêt (quasiement...)

Invité · 17/01/2018, 13h07

bonjour,

1- Es-tu sûr d'avoir bien fait la bonne recherche ?

DataTables Table plug-in for jQuery
Download -> Step 3

Regarde les Exemples.

2-

Envoyé par Geoffrey74

...tu peux gérer soit en PHP, mais c'est lourd avec des rechargements de page à chaque fois...

"rechargements de page", en PHP seul oui, mais pas avec Ajax * !

* Ajax implique PHP + JavaScript

**Geoffrey74** · 17/01/2018, 15h01

Envoyé par jreaux62

"rechargements de page", en PHP seul oui, mais pas avec Ajax * !

Oui je parlais bien sûr de PHP seul

**moimp** · 18/01/2018, 09h49

J'ai testé à partir de cet exemple mais rien ne se passe.

Voici le code source de ma page (j'ai vérifié que le fichier source DataTables/datatables.min.js est bien chargé en y plaçant un alert('bbbbb') en première ligne) :

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Mon titre</title>
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="-1" />
	<base href="http://snc-accomp.local/" />
 
	<link rel="stylesheet" media="all" type="text/css" href="css/structure.css" /> <!-- Standardisation des dimensions et positions communes pour tous les navigateurs -->
	<link rel="stylesheet" media="screen" type="text/css" href="css/screen.css" />
	<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
	<link rel="stylesheet" media="screen" type="text/css" href="css/default_blue.css" /> <!-- Calendrier -->
</head>
 
<body>
 
	<h1>Titre principal</h1>
	<h2>Gestion des bénévoles et des accompagnements</h2>
 
	<div id="main">
 
		<div id="left">
			<nav>
				<ul class="col1">
					<li class="smenu"><a href="home.php">Accueil</a></li>
					<li class="smenu"><a href="displUsers.php">Bénévoles</a></li>
					<li class="smenu"><a href="displAccomps.php">Accompagnements</a></li>
					<li class="smenu"><a href="http://snc-accomp.local/displAccomps.php">Resp. groupe</a>
						<ul class="col2">
							<li><a href="editHome.php">Edition infos</a></li>
						</ul>
					</li>
					<li class="smenu"><a href="logout.php">Déconnexion</a></li>
				</ul>
			</nav>
		</div>
 
		<article id="right">
 
<h3>Tableau des accompagnements</h3>
 
<table id="table">
	<tr>
		<th>id</th><th>Pseudo</th><th>Sexe</th><th>Age</th><th>Date d'accueil</th><th>Binôme</th><th>Dernier rdv <sup>(1)</sup></th><th>Nb de rdv <sup>(1)</sup></th>
		<th>Etape <sup>(2)</sup></th><th></th><th></th><th><sup>(3)</sup></th><th></th></tr><tr><td>1</td><td>SebastienC1</td><td>M</td><td>41</td><td>16/09/2016</td>
		<td>Marc<br/>Jean-Louis</td><td></td><td></td><td>4</td>
		<td><a href='editChercheur.php?id=1' title='Editer l&apos;identité'><img src='images/edit.png' /></a></td>
		<td><a href='displDetails.php?id=1' title='Voir fiche de renseignements'><img src='images/glass.png' /></a></td>
		<td><a href='editAccomp.php?id=1' title='Editer fiche de renseignements'><img src='images/blocknote.png' /></a></td>
		<td><a href='displRdvs.php?id=1' title='Entretiens d&apos;accompagnement'><img src='images/cup.png' /></a></td>
	</tr>
	<tr>
		<td>2</td><td>AbelT2</td><td>M</td><td>23</td><td>19/10/2016</td><td>Marc<br/>André</td><td></td><td></td><td>4</td>
		<td><a href='editChercheur.php?id=2' title='Editer l&apos;identité'><img src='images/edit.png' /></a></td>
		<td><a href='displDetails.php?id=2' title='Voir fiche de renseignements'><img src='images/glass.png' /></a></td>
		<td><a href='editAccomp.php?id=2' title='Editer fiche de renseignements'><img src='images/blocknote.png' /></a></td>
		<td><a href='displRdvs.php?id=2' title='Entretiens d&apos;accompagnement'><img src='images/cup.png' /></a></td>
	</tr>
	<tr>
		<td>3</td><td>ValéryM3</td><td>M</td><td>41</td><td>19/09/2016</td><td>André<br/>Julien</td><td></td><td></td><td>4</td>
		<td><a href='editChercheur.php?id=3' title='Editer l&apos;identité'><img src='images/edit.png' /></a></td>
		<td><a href='displDetails.php?id=3' title='Voir fiche de renseignements'><img src='images/glass.png' /></a></td>
		<td><a href='editAccomp.php?id=3' title='Editer fiche de renseignements'><img src='images/blocknote.png' /></a></td>
		<td><a href='displRdvs.php?id=3' title='Entretiens d&apos;accompagnement'><img src='images/cup.png' /></a></td>
	</tr>
	<tr>
		<td>4</td><td>CyndieP4</td><td>F</td><td>28</td><td>14/11/2016</td><td>Marc<br/>Julien</td><td></td><td></td><td>4</td>
		<td><a href='editChercheur.php?id=4' title='Editer l&apos;identité'><img src='images/edit.png' /></a></td>
		<td><a href='displDetails.php?id=4' title='Voir fiche de renseignements'><img src='images/glass.png' /></a></td>
		<td><a href='editAccomp.php?id=4' title='Editer fiche de renseignements'><img src='images/blocknote.png' /></a></td>
		<td><a href='displRdvs.php?id=4' title='Entretiens d&apos;accompagnement'><img src='images/cup.png' /></a></td>
	</tr>
</table>
 
<p class="note">(1) rdv = rendez-vous</p>
<p class="note">(2) Codes d'étapes&nbsp;:</p>
<ol class="note">
	<li>Attente 1er accueil</li><li>Attente affectation binôme</li><li>En cours</li><li>Sorti(e)</li></ol>
<p class="note">(3) Après affectation du binôme, seuls les membres du binôme ont accès à l'édition de la fiche.</p> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="DataTables/datatables.min.js"></script>
<script>
        $(document).ready(function() {
                $('#table').DataTable();
        } );
</script>
		</article>
	</div>
 
</body>
 
</html>

Commande de tri d'un tableau

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager