Utilisation de DataTable

**breizhcola29** · 04/04/2016, 15h12

Bonjour,

je viens vers vous pour un problème qui va surement paraître ridicule pour certains. J'ai découvert le plug-in par hasard et j'ai vu qu'il été fort utile.
Mon soucis est que j'ai un bon affichage, mais lorsque que je veux trier ou encore rechercher dans le tableau, rien ne se passe ...

Voici mon code (fichier source) :

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
 
<?php
// On appelle la session
session_start();
//include "dhtmlgoodies-tree/dhtmlgoodies_tree.class.php";
?>
 
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php if ((isset($_GET["dest"]) AND $_GET["dest"]=='affiche_messages')|| !isset($_GET["dest"])){ ?>
<meta http-equiv="refresh" content="120; URL=index.php?action=affiche_messages">
<?php } ?>
<title>MAI - INTRANET</title>
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
 
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/menu.css" media="screen" />
<!--Ajout pour partie parc_client-->
<link rel="stylesheet" type="text/css" href="css/client.css" media="screen" />
 
<link rel="stylesheet" type="text/css" href="js/jquery-ui-1.11.1.custom/jquery-ui.css">
<link href="parc_client/fa/css/font-awesome.min.css" rel="stylesheet"> <!-- Font awsome -->
 
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
 
<!-- Plusieurs module d'un coup, jquery, bootstrap datatable -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs-3.3.6/jq-2.2.0,dt-1.10.11,r-2.0.2/datatables.min.css" media="screen"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/t/bs-3.3.6/jq-2.2.0,dt-1.10.11,r-2.0.2/datatables.min.js"></script>
 
<script src="js/jquery-ui-1.11.1.custom/jquery-ui.js"></script>
<script language="javascript" src="js/datepicker-fr.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
    $('#example').dataTable();
} );
</script>
 
<script language="JavaScript" type="text/javascript" src="js/html2xhtml.js"></script>
 
<script language="JavaScript" type="text/javascript" src="js/verif.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
 
<!--Ajout pour partie parc_client-->
<script src="js/dialog.js"></script>
 
 
</head>
 
<!-- Reste pas interessant, de la BDD etc ... -->
</html>

(fichier appele)

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
 
 
<div class="table-responsive">
	<table class="table table-striped table-bordered" id="example" cellspacing="0" width="100%">
		<thead>
			<tr >
				<th>Nom</th>
				<th>Type de matériel</th>
				<th>Emplacement</th>
				<th>IP</th>
				<th>Personnel</th>
				<th>Logmein</th>
				<th  width='120px'>Gestion</th>
			</tr>
		</thead>
 
		<?php
                // récupére la table matériel du client actuel
                $requete1 = $bdd->query("
                SELECT *
                FROM mai_tel.materiel a INNER JOIN mai_tel.marque_materiel b ON
                b.id_marque_M = a.id_marque_M INNER JOIN
                mai_tel.type_materiel c ON c.id_type_M = a.id_type_M
                WHERE numero_du_client = '$id_client' ORDER BY nom_informatique");
                while ($data1 = $requete1->fetch()) {
                        $id_materiel = $data1['id_materiel'];// ID du materiel courant
                        $id_type_M = $data1['id_type_M'];
                        $id_marque_M = $data1['id_marque_M'];
                        ?>
			<tbody>
				<tr>
					<td ><?php echo $data1['nom_informatique']?></td>
					<td ><?php echo $data1['libeller_type_M']?></td>
					<td ><?php echo $data1['emplacement_physique']?></td>
					<td ><?php echo $data1['adresse_ip']?></td>
					<td >
						<?php
                                                $requete2 = $bdd->query("
                                                SELECT *
                                                FROM mai_tel.se_connecte a INNER JOIN mai_tel.utilisateur b ON
                                                b.id_utilisateur = a.id_utilisateur
                                                WHERE id_materiel = '$id_materiel'");
                                                while ($data2 = $requete2->fetch()) {
                                                        echo $data2['nom_personnel'].' '.$data2['prenom_Personnel'].'</br>';
                                                }
                                                $requete2->closeCursor();
                                                ?>
					</td>
					<td ><?php echo $data1['login_logmein'].'</br>'.$data1['mot_de_passe_logmein']?></td>
					</tr>
					<?php
 
                                }
                                $requete1->closeCursor();
                                ?>
			</tbody>
		</table>
	</div>

Un grand merci pour vos réponses !
Cordialement,

**Watilin** · 04/04/2016, 16h10

Breizhcola29, tiens donc, tu serais pas finistérien par hasard ?

Avec juste « rien ne se passe » comme information, on ne va pas pouvoir t'aider beaucoup. Notamment, le cœur du problème a priori c'est cet élément #example mais on ne voit même pas son code HTML. Fais Ctrl+U sur ta page pour voir le HTML généré et copie la partie intéressante pour nous la montrer.

Et si tu nous disais si tu as des messages d'erreur, si tu as essayé des trucs avec la console F12, quelle API tu utilises pour communiquer avec ta base de données (mysql, mysqli, PDO ou autre), etc. ?

As-tu vérifié (par exemple avec PHPMyAdmin) que tes requêtes SQL renvoient le résultat attendu ? Sais-tu comment faire apparaître toutes les erreurs PHP et SQL*?

**breizhcola29** · 04/04/2016, 16h35

Merci de ta réponse. En faite je dois reprendre le travail de quelqu'un d'autre et le le rendre plus joli. Il n'y a pas de soucis concernant les renvois de la base de données (sa fonctionne).
Concernant le "rien ne se passe", par exemple si je clic sur une icône de trie , rien ne se passe. Idem pour la recherche par texte, rien ne se passe.
Pour le code html , j'ai mis dans mon premier post, le code de example mais c'est autre chose que tu demandes ?

Cordialement,

**SpaceFrog** · 04/04/2016, 16h39

Personnellement je vois du code php.. pas du html source ...

**breizhcola29** · 04/04/2016, 16h53

Voila, je l'ai mis en fichier, plus simple.

Merci encore et bon courage pour décrypter ^^

**Watilin** · 04/04/2016, 20h09

As-tu regardé ta console JavaScript*? D'après la doc de DataTable, tu devrais au moins avoir un warning.

**breizhcola29** · 05/04/2016, 07h20

Bonjour,

Quand tu parles de la console JavaScript , c'est bien quand on fait F12 ? Parce-que je n'ai rien, aucun warning qui s'affiche =(

Merci de vos réponses !

**Watilin** · 05/04/2016, 14h00

Essaye directement $('#example').DataTable() dans ta console.

Quand je regarde ton code HTML généré, il y a un <td> qui, si j'ai bien compris, correspond à la colonne « Gestion ». Dans ce <td> il y a un formulaire. Or, ce formulaire n'apparaît nulle part dans ton code PHP. Aurais-tu posté du code pas à jour ?

Teste ta structure HTML avec le validateur. Il est exigeant et signale beaucoup de choses, mais ça te donnera déjà des indices sur ce qui ne va pas.

Je te propose une autre syntaxe PHP, avec moins de commutateurs (<?php et ?>) et une indentation basée sur la logique du code plutôt que sur le HTML.

Code PHP :

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
<div class="table-responsive">
  <table class="table table-striped table-bordered" id="example" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Nom</th>
        <th>Type de matériel</th>
        <th>Emplacement</th>
        <th>IP</th>
        <th>Personnel</th>
        <th>Logmein</th>
        <th width='120px'>Gestion</th>
      </tr>
    </thead>
 
<?php
// récupére la table matériel du client actuel
$requete1 = $bdd->query("SELECT *
  FROM mai_tel.materiel a 
    INNER JOIN mai_tel.marque_materiel b ON b.id_marque_M = a.id_marque_M
    INNER JOIN mai_tel.type_materiel c   ON c.id_type_M   = a.id_type_M
  WHERE numero_du_client = '$id_client'
  ORDER BY nom_informatique");
 
while ($data1 = $requete1->fetch()) {
  $id_materiel = $data1['id_materiel']; // ID du materiel courant
  $id_type_M   = $data1['id_type_M'];
  $id_marque_M = $data1['id_marque_M'];
 
  echo "<tbody><tr>
    <td> {$data1['nom_informatique']} </td>
    <td> {$data1['libeller_type_M']} </td>
    <td> {$data1['emplacement_physique']} </td>
    <td> {$data1['adresse_ip']} </td>
    <td>";
 
  $requete2 = $bdd->query("SELECT *
    FROM mai_tel.se_connecte a
      INNER JOIN mai_tel.utilisateur b ON b.id_utilisateur = a.id_utilisateur
    WHERE id_materiel = '$id_materiel'");
 
  while ($data2 = $requete2->fetch()) {
    echo "{$data2['nom_personnel']} {$data2['prenom_Personnel']} <br />";
  }
 
  $requete2->closeCursor();
 
  echo "</td>
    <td> {$data1['login_logmein']} <br /> {$data1['mot_de_passe_logmein']} </td>
    </tr>";
}
$requete1->closeCursor();
?>
 
      </tbody>
    </table>
  </div>

Pense à échapper les variables que tu mets dans tes requêtes SQL. Dans l'idéal tu devrais faire des requêtes préparées.

**breizhcola29** · 05/04/2016, 14h07

Merci de ta réponse,

Comment fait-on pour ajouter du code directement dans la console ? Désolé, mais le Web n'est pas ma spécialité =)

Pour le code, je le reprend d'un développement précédent pour mettre un affichage a jour donc il est complet.
Concernant le validateur, il permet aussi de corriger des erreurs de ce type ? Je croyais que c'était que pour la syntax pur .

Cordialement,

**breizhcola29** · 05/04/2016, 14h45

Je viens d'essayer ta solution, qui est un peux plus propre =) mais sa ne marche toujours pas =( rien ne se passe. Pourtant lorsque je clique sur l'icône, il détecte bien un événement ..

Merci de ta réponse,

**Watilin** · 05/04/2016, 15h52

Avec F12 tu ouvres le panneau qui s'appelle « console ». Mais dans ce panneau il y a plusieurs onglets, et il y a également un onglet qui s'appelle « console ». C'est là-dessus que tu dois être. Ensuite, tu dois trouver le prompt, c'est un symbole qui ressemble à un ou deux chevrons (le symbole >). Tu tapes ton code à la suite de ce chevron, et tu exécutes en appuyant sur entrée.

Le validateur examine du code HTML uniquement, il ne sait pas interpréter PHP. Fais comme tu as déjà fait avec Ctrl+U, copie le code entier, puis colle-le dans la section « direct input » du validateur.

Une autre piste, c'est de regarder comment le moteur DOM interprète ton code HTML. Quand il y a des erreurs HTML, le moteur construit l'arbre DOM comme il peut en tentant ce qui lui paraît le plus cohérent. C'est cette structure qui est vue par JavaScript, et savoir à quoi elle ressemble peut t'aider à comprendre pourquoi DataTable ne fonctionne pas.

Pour voir la structure de l'arbre DOM, examine document.documentElement.outerHTML. Comme c'est une longue chaîne, la console va probablement refuser de l'afficher en entier ; dans ce cas tu peux l'afficher dans une nouvelle fenêtre :

Code :

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

window.open('data:text/plain,' + encodeURIComponent(document.documentElement.outerHTML))

**breizhcola29** · 05/04/2016, 16h06

Merci de ta réponse. Je découvre des choses =) . J'ai fait la dernière commande que tu ma dit, sa ne m'a pas avancer à plus ^^, j'ai l'impression d'avoir la structure du document HTML (comme un CTRL+U). Je comprends vraiment pas pourquoi sa en fonctionne pas. Je vais essayer de m'orienter vers une autre solution je pense =)

Cordialement,

**Watilin** · 05/04/2016, 16h28

Il y a forcément des différences. Fais un diff. (Si tu es sous Linux, diff est disponible de base ; si tu es sous Windows, tu as par exemple Notepad++ qui a une extension diff bien pratique.)

Ou alors, examine des extraits de code plus petits. Utilise l'inspecteur de la console pour sélectionner par exemple un des éléments <button>, tu pourras voir sa structure DOM dans l'onglet console en tapant $0.innerHTML. Compare avec ton code source.

Dans le validateur, déplie la section « options », tu y trouveras une option « Group Error Messages by Type ». Tu verras plus facilement le genre d'erreurs que ton code contient, sans être obligé de les examiner une par une.

**breizhcola29** · 05/04/2016, 16h43

T'as raison =) il y a bien des différences qui sont logiques. Je vois bien qu'il créer des éléments qui ne sont pas dans la structure de base, malgré ça, je ne vois toujours pas le problème et je vois encore moins ou il est !

En PJ : le DOM et le code

Merci de vos réponses,

**Watilin** · 05/04/2016, 17h17

Mais du coup tu avais essayé $('#example').DataTable() dans la console ou pas ?

Edit: Vérifie qu'il n'y a pas de filtre activé dans la console qui pourrait masquer certaines informations.

**breizhcola29** · 05/04/2016, 17h27

Oui oui, d'ailleurs sa permet de voir le déclenchement avec l’apparition de tous les champs. Mais sa ne marche toujours pas =(.

Pour les filtres, oui je suis sûr à 100% que je vois toutes les erreurs possibles concernant le JS.
Après, est ce que sa peux venir du CSS ?

Merci de de prendre autant de temps !

**breizhcola29** · 06/04/2016, 11h43

Au final, j'ai réussi à faire ce que je voulais d'une autre manière =) C'est un peux moins beau mais çà fonctionne !

Merci d'avoir pris le temps d'essayer de résoudre mon problème,

Cordialement,

**Watilin** · 06/04/2016, 12h11

Pour rendre service aux autres qui tomberaient par hasard sur ce topic, merci de prendre le temps d'expliquer comment tu as résolu ton problème.

**breizhcola29** · 11/04/2016, 08h16

Bonjour,

désolé pour le retard de ma solution ^^. Pour contourner mon problème de DataTable, j'ai utilisé deux fonctions séparées qui me permettent d'avoir un tri par colonne et tri par recherche. C'est certes moins beau mais sa a le mérite de fonctionner =)

En PJ, les fonctions.

Cordialement,

**Watilin** · 11/04/2016, 15h48

Merci

Utilisation de DataTable

jQuery

Discussions similaires

Partager

Partager