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>

Invité · 18/01/2018, 10h16

Bonjour,

Dans l'ordre :

Code :

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

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

Code :

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

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 :

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

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

**moimp** · 18/01/2018, 12h02

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.