Discussion :

[RastaBomboclat]

Bonjour,

Je souhaite afficher sur un Modal de Bootstrap (4 ou 5), des informations provenant de ma base de données, à partir d’un clic sur un bouton d’un tableau.

J’ai un tableau qui affiche déjà les données et tout fonctionne bien. Sur la dernière colonne de mon tableau, j’ai un bouton « Details », et je souhaite qu’en cliquant sur ce bouton, que s’affiche sur un Modal des informations supplémentaires du Client concerné.

Pour le moment, il n’affiche que les informations du premier client (ID = 1 dans la base de données). Je ne sais pas si je dois aussi faire une boucle ici comme sur le tableau ou je dois cliquer le bouton ou utiliser le GET, alors que je suis sur la même page !?

Mon Code du tableau qui fonctionne bien avec le bouton qui affiche le Modal:

Code :

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

1
2
3
4
5
6
<td><?php echo $name ?></td>
<td><?php echo $nif ?></td>
<td><?php echo $adresse ?></td>
<!-- Button to Open the Modal -->
<td><button type="button" value="<?php echo $ID_Client ?>" id="mybtn" class="btn btn-primary mybtn" data-toggle="modal" data-target="myModal">Details</button>
</td>

Mon Code pour afficher les infos dans le modal après clic sur le bouton Details :

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
$fetchClient = $conn->prepare("SELECT client.id_Client, client.nom_Client, client.NIF_Client, client.adresse_Client, client.tel_Client, client.email_Client, service.id_service, service.categ_service, service.type_service, service.prix_service, service.fk_id_client FROM service INNER JOIN client ON service.fk_id_client = client.id_Client");
$fetchClient->execute();
 
If($fetchClient_ = $fetchClient->fetch()){
$nomClient = ($fetchClient['nom_Client '];
$telClient = ($fetchClient['tel_Client'];
$emailClient = ($fetchClient['email_Client'];
$typeService = ($fetchClient['type_service'];
$prixService = ($fetchClient['prix_service'];
?>
            <p class="text-justify text-dark">Client: <?php echo $nomClient ?></p>
            <p class="text-justify text-dark">Téléphone: <?php echo $telClient ?></p>
            <p class="text-justify text-dark">Email: <?php echo $emailClient ?></p>
            <p class="text-justify text-dark">Type de Service: <?php echo $typeService ?></p>
            <p class="text-justify text-dark">Prix: <?php echo $ prixService ?></p>

[DonKnacki]

bonjour,

dans la mesure ou ta requête renvoie plus d'un résultat, il faut mieux utilisé fetch_all (ou équivalent; tu n'as pas indiqué quelle est l'extension que tu utilises pour te connecter à la BDD) et donc faire une boucle

[RastaBomboclat]

Bonjour DonKnacki,

Je ne l’ai pas indiqué puisque cette partie-là fonctionne déjà bien et j’ai dans ma requête sql spécifier le ‘$conn->’ quand je préparais ma requête.

Je vais essayer avec fetchAll et fetchObjet pour voir ce que ça donne. Il y a des vidéos sur YouTube mais ils sont en MySQLi et utilisent AJAX que je ne maitrise pas. Alors je continue de chercher une version en PDO et sans Ajax.

[Toufik83]

Bonjour,

D'après la dernière discussion sur le même sujet, je crois que vous avez utilisé le plugin DataTable pour alimenter le tableau, c'est bien, mais ne me dites pas que vous sélectionnez toutes les lignes de la base de données !!! car si c'est le cas, vous utilisez mal le plugin.

Il faudrait l'utiliser en mode serverSide comme c'est montré dans l'exemple en passant par les options processing: true, serverSide: true et ajax: 'cheminfichier_qui_alimente_la_table.php' en JS et les variables recordsTotal, recordsFiltered et data en PHP.

à chaque fois qu'il y'a une action (darw) sur la table (recherche, tri, changement de page...), le plugin envoi des variables vers le fichier PHP utilisé dans le paramètre "ajax", comme $_REQUEST['length'] qui représente le nombre de ligne à afficher par page, $_REQUEST["order"] qui représente la colonne à trié et le mode de tri (soit asc soit desc), $_REQUEST['start'] qui représente la page à afficher (offset), $_REQUEST['columns'] qui représente les colonnes de votre tableau ... et pleins d'autres variables que vous pouvez visualiser sur l'onglet Réseau de l'outil de développement du navigateur.

Le fichier PHP reçois donc les variables, puis vous devriez construire votre requête dynamiquement en fonction de ces variables et stocker le résultat dans un tableau data et renvoyer le résultat en JSON avec echo json_encode($data), dont $data est le tableau global structuré comme suite :

Code :

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

1
2
3
4
$data=["recordsTotal"=>"nombre Totale des lignes de la db",
"recordsFiltered"=>"nombre des ligne filtrés en fonction des critères de recherche",
"data"=>[/*Les lignes récupérées avec offset, limit par la requête SQL*/]
]

Je vois aussi que vous ajoutez le bouton manuellement et avec un id <button type="button" value="<?php echo $ID_Client ?>" id="mybtn" ... >, ce qui veut dire que chaque ligne aura un bouton avec le même id "mybtn", alors qu'un ID doit être unique dans une page HTML.

Il faudrait utiliser l'option columns pour initialiser les colonnes du tableau, et si vous avez besoin d'ajouter un bouton, vous devriez l'ajouter dans columns avec data:null et personnaliser le retour avec le callback render comme suite :

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
$("tableau").DataTable({
   serverSide:true,
   processing:true,
   ajax:"fichierAlimantant_la_table.php",
   columns:[
      {data:"dataColonne0"},
      {data:"dataColonne1"},
      {data:"dataColonne2"},
       ....,
      {  
          data:null,//pas de donnée pour cette colonne, utilise plutôt le render
          orderable:false, //désactiver la tri sur la colonne
          searchable:false, //désactiver la recherche sur la colonne
          render:function(data,display,dataRow,settings){//personnaliser le retour et renvoyer le bouton avec un id DT_RowId
		return '<button type="button" id="mybtn-'+dataRow.DT_RowId+'" class="btn btn-primary mybtn" data-toggle="modal" data-target="myModal">Details</button>';
          }
      }
   ]
})

Note : DT_RowId devrait être la valeur de la clé primaire de votre table, il est utilisé par DataTable pour attribuer un id unique à chaque <tr> du tableau.

[RastaBomboclat]

Bonjour Toufik83,

Je crois que je commence à me mêler un peu les pinceaux.
En effet ta solution en la lisant est bien claire et correspond à ce qui est dans la documentation du plugin. Mais je n’arrive pas a la mettre en place. Je tourne en boucle infini.
Mon souci était de faire qu’en cliquant le bouton Details, que le BS Modal affiche les infos de la ligne concerné. Mais je suis encore au niveau d’afficher les infos de ma base de données dans le tableau en utilisant DataTables. Ajax me tourne la tête. Là j'apprends lentement mais j'apprends...

Le fichier PHP reçois donc les variables, puis vous devriez construire votre requête dynamiquement en fonction de ces variables et stocker le résultat dans un tableau data et renvoyer le résultat en JSON avec echo json_encode($data), dont $data est le tableau global structuré comme suite :

Code :

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

1
2
3
4
$data=["recordsTotal"=>"nombre Totale des lignes de la db",
"recordsFiltered"=>"nombre des ligne filtrés en fonction des critères de recherche",
"data"=>[/*Les lignes récupérées avec offset, limit par la requête SQL*/]
]

Je ne trouve pas où mettre le code ci-dessus avec la varible $data. J’ai mon index avec le code principale (le Tableau devant être alimenté), et le script JS (avec l’initialisation de processing, serverSide et columns). D’autre part, j’ai un autre fichier .php où j’ai le Server-side script (comme dans la doc.),

$data=["recordsTotal"=>"nombre Totale des lignes de la db", pour ça je dois faire un $recordsTotal = $fetchClient->rowCount(); ? A quel niveau, dans quel fichier? je me suis un peu perdu.

[Toufik83]

Bonjour,

Un seul fichier PHP qui est utilisé et pas plusieurs, celui qui a été déclaré dans l'option "ajax" au niveau JS.

Non, pas de rowCount() parce que on veut seulement récupérer le nombre des lignes, utilisez plutôt fetchColumn() qui récupère le résultat d'une requête count().

Dans votre fichier PHP que vous avez déclaré dans l'option "ajax", vous devriez avoir quelque chose comme ça :

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
<?php
$pdo=new PDO("dsn","userRoot","password");
$data=[
    "recordsTotal"=>0,
    "recordsFiltered"=>0,
    "data"=>[]
];
$search=$_REQUEST['search']['value'];
$limit=(int)$_REQUEST['length'];
$offset=(int)$_REQUEST["start"];
$order=$_REQUEST["order"][0];
$select="select ";
$colonnes="colonne0,colonne1,colonne2... ";
$count="count(colonne_clé_primaire) ";
$where="where colonne0 like :col or colonne1 like :col or colonne2 like :col ";
$from="from table ";
$sql=$select.$colonnes.$from;
//récupérer le nombre total des lignes de la table en question
$stmtCountAll=$pdo->query($select.$count.$from);
$countAll=$stmtCountAll->fetchColumn();
$data["recordsTotal"]=$countAll;
 
$exec[":col"]="%".$search."%";//on ajoute le marqueur :col au tableau d'exécution de la requête et les % vu que c'est une requête avec like 
 
//récupérer le nombre des lignes filtrées par la clause where
$stmtCountFiltered=$pdo->prepare($select.$count.$from.$where);
$stmtCountFiltered->execute($exec);
$countFiltered=$stmtCountFiltered->fetchColumn();
$data["recordsFiltered"]=$countFiltered;
 
//récupérer les lignes en fonction de limit et offset, limit est définie au niveau JS dans l'option "pageLength" qui est récupéré par $_REQUEST["length"]
//et offset récupéré par $_REQUEST["start"], pour remplir $data["data"];
$stmtData=$pdo->prepare($select.$colonnes.$from.$where." order by ".$order["dir"]." ".$order["column"]." limit ".$offset." , ".$limit);
$stmtData->execute($exec);
 
//là vous pouvez utiliser rowCount
if($stmtData->rowCount()>0){
   while($d=$stmtData->fetch()){
       $data['data'][]=$d;
   }
   $stmtData->closeCursor();
}
echo json_encode($data);

Pour le bouton d'édition, c'est la dernière étape, parce que dès que le plugin fonctionne, vous aurez pas mal de solutions JS pour récupérer les valeurs de la ligne que vous voulez éditer et afficher ses détails...

Montrez-nous comment vous avez initialisé le DataTable et le code du fichier PHP utilisé dans "ajax".

[RastaBomboclat]

Pour le bouton d'édition, c'est la dernière étape, parce que dès que le plugin fonctionne, vous aurez pas mal de solutions JS pour récupérer les valeurs de la ligne que vous voulez éditer et afficher ses détails...

Montrez-nous comment vous avez initialisé le DataTable et le code du fichier PHP utilisé dans "ajax".

Bonjour Toufik83,

Voici les scripts que j'ai utilisé. Tu noteras que j'ai aussitôt mis à jour mon code avec ce que tu m'as envoyé hier(merci pour ce code, pour la patience de tout écrire et pour la bonne volonté✌).

Le code du fichier index.php

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
87
88
89
90
91
92
93
94
<?php
/* TOUFIK */
/* Connexion à la base de données */
$serveur ="localhost";
$login ="root";
$db ="datatables";
$pass =""; 
 
try{
    $connection = new PDO("mysql:host=$serveur;dbname=$db;charset=utf8", $login, $pass);
    $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOEXCEPTION $e){
    echo 'Não foi possivel criar conexão com a base de dados. Queira por favor contactar a DTSI_IN-EP para ajuda ' .$e-> getmessage();
    exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RastaBomboclat</title>
    <link rel="stylesheet" href="DataTables/datatables.min.css">
    <link rel="stylesheet" href="../bootstrap-5.2.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="DataTables/DataTables-1.13.2/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="DataTables/DataTables-1.13.2/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="DataTables/Buttons-2.3.4/css/buttons.bootstrap5.min.css">
    <link rel="stylesheet" href="DataTables/Buttons-2.3.4/css/buttons.dataTables.min.css">
    <style>
    </style>
</head>
<body>
    <h1>RastaBomboclat</h1>
    <!-- My Table Teste -->
    <table id="myTable" class="display" style="width:100%">
        <thead>
            <tr>
                <!-- <th class="text-center fw-bolder">Nº</th> -->
                <th class="text-center fw-bolder">Client</th>
                <th class="text-center fw-bolder">NIF</th>
                <th class="text-center fw-bolder">Adresse</th>
                <th class="text-center fw-bolder">Telephone</th>
                <th class="text-center fw-bolder">Email</th>
                <!-- <th class="text-center fw-bolder">Detail</th> -->
            </tr>
        </thead>
        <tfoot>
            <tr>
                <!-- <th class="text-center fw-bolder">Nº</th> -->
                <th class="text-center fw-bolder">Client</th>
                <th class="text-center fw-bolder">NIF</th>
                <th class="text-center fw-bolder">Adresse</th>
                <th class="text-center fw-bolder">Telephone</th>
                <th class="text-center fw-bolder">Email</th>
                <!-- <th class="text-center fw-bolder">Detail</th> -->
            </tr>
        </tfoot>
    </table>
 
    <!-- JS -->
    <script src="../edipdemo6/node_modules/jquery/dist/jquery.min.js"></script>
    <!-- <script src="DataTables/datatables.min.js"></script> -->
    <script src="../MyPlugIn/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="DataTables/Buttons-2.3.4/js/dataTables.buttons.min.js"></script>
    <script src="DataTables/JSZip-2.5.0/jszip.min.js"></script>
    <script src="DataTables/pdfmake-0.1.36/pdfmake.min.js"></script>
    <script src="DataTables/pdfmake-0.1.36/vfs_fonts.js"></script>
    <script src="DataTables/Buttons-2.3.4/js/buttons.html5.min.js"></script>
    <script src="DataTables/Buttons-2.3.4/js/buttons.print.min.js"></script>
    <!-- <script src="DataTables/"></script> -->
    <script>
        $(document).ready(function(){
            $('#myTable').DataTable({
                dom:'Bfrtip',
                buttons:['copy','csv','excel','pdf','print'],
                select: true,
                processing: true,
                serverSide: true,
                ajax: 'server_processing.php',
                columns:[
                    {data:"id_Client"},
                    {data:"nom_Client"},
                    {data:"NIF_Client"},
                    {data:"adresse_Client"},
                    {data:"tel_Client"},
                    {data:"email_Client"},
                ]
            });
        });
    </script>
</body>
</html>

Le code avec ta mis à jour, du fichier du server-side processing:

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
<?php
/* TOUFIK */
/* Connexion à la base de données */
$serveur ="localhost";
$login ="root";
$db ="datatables";
$pass =""; 
 
try{
    $pdo = new PDO("mysql:host=$serveur;dbname=$db;charset=utf8", $login, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOEXCEPTION $e){
    echo 'La connexion n\'a pas pu être établi. Veuillez conctacter le RastaBomboclat! ' .$e-> getmessage();
    exit();
}
$data=[
    "recordsTotal"=>0,
    "recordsFiltered"=>0,
    "data"=>[]
];
$search=$_REQUEST['search']['value'];
$limit=(int)$_REQUEST['length'];
$offset=(int)$_REQUEST["start"];
$order=$_REQUEST["order"][0];
$select="select ";
$colonnes="id_Client,nom_Client,NIF_Client,adresse_Client,tel_Client,email_Client ";
$count="count(id_Client) ";
$where="where nom_Client like :col or tel_Client like :col or tel_Client like :col ";
$from="from client ";
$sql=$select.$colonnes.$from;
//récupérer le nombre total des lignes de la table en question
$stmtCountAll=$pdo->query($select.$count.$from);
$countAll=$stmtCountAll->fetchColumn();
$data["recordsTotal"]=$countAll;
 
$exec[":col"]="%".$search."%";//on ajoute le marqueur :col au tableau d'exécution de la requête et les % vu que c'est une requête avec like 
 
$stmtCountFiltered=$pdo->prepare($select.$count.$from.$where);
$stmtCountFiltered->execute($exec);
$countFiltered=$stmtCountFiltered->fetchColumn();
$data["recordsFiltered"]=$countFiltered;
 
//récupérer les lignes en fonction de limit et offset, limit est définie au niveau JS dans l'option "pageLength" qui est récupéré par $_REQUEST["length"]
//et offset récupéré par $_REQUEST["start"], pour remplir $data["data"];
$stmtData=$pdo->prepare($select.$colonnes.$from.$where." order by ".$order["dir"]." ".$order["column"]." limit ".$offset." , ".$limit);
$stmtData->execute($exec);
 
if($stmtData->rowCount()>0){
   while($d=$stmtData->fetch()){
       $data['data'][]=$d;
   }
   $stmtData->closeCursor();
}
echo json_encode($data);

Ma base de données et la reponse au navigateur que je recois maintenant (rien du tout, juste un vide, pas de message d'erreur.):


Je tiens à rappeler que le message d'erreur n'apparaît plus. Maintenant il n'y que la page vide.

Merci encore Toufik83 de ton aide et ta contribution à la résolution de mon problème
Merci à vous tous qui contribuez... ✌

[RastaBomboclat]

Toufik83

Merci beaucoup pour ta réponse.
Je vais la mettre en place et te reviens quand c'est prêt.