Commande de tri d'un tableau

Version imprimable

01/12/2017, 21h40
moimp

Commande de tri d'un tableau

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.
01/12/2017, 22h48
Invité

Bonjour,

:recherch: "dataTable"
17/01/2018, 11h59
moimp

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 !
17/01/2018, 12h54
Geoffrey74

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...)
17/01/2018, 13h07
Invité
bonjour,

1- Es-tu sûr d'avoir bien fait la bonne recherche ? :weird:
- DataTables Table plug-in for jQuery
  Download -> Step 3
Regarde les Exemples.

2-

Citation:

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
17/01/2018, 15h01
Geoffrey74

Citation:

Envoyé par jreaux62

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

Oui je parlais bien sûr de PHP seul :aie:

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:

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>

18/01/2018, 10h16
Invité
Bonjour,

Dans l'ordre :

Code:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
Code:

1 2 <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
Code:

1 2 3 $(document).ready(function() { $('#table').DataTable(); } );
Et dans la <table>, il te manque les balises <thead> <tbody> nécessaires pour que ça fonctionne.

exemple : https://codepen.io/jreaux62/pen/ZvmXyR
18/01/2018, 12h02
moimp
D'abord un grand merci!
Dommage que les infos que tu me donnes ne soit pas sur le site ou qu'alors elles soient bien cachées.

Il me reste encore quelques petits problèmes à régler pour lesquels je ne vais pas te solliciter avant d'avoir chercher:
- Le css par défaut a l'inconvénient de créer des flèches de la même couleur que le fond de ma ligne de tête.
- Ajouter des critères de filtrage.
- Traduire les textes par défaut en Français.
Enfin, compte tenu des difficultés que j'ai eues et même si je ne sais pas encore m'y prendre, je me demande si je ne rédigerais pas un mini tutoriel qui éviterait à d'autres de galérer.
18/01/2018, 12h25
Invité
Pour le changement de langue, regarde dans les Plug-ins et Manual :
- Plug-ins : Internationalisation
- Manual : Internationalisation
Pour la mise en forme CSS :
- Manual : Styling
C'est sûr, il faut lire (et comprendre) un peu l'anglais... :aie: