Afficher des informations d'une base de données dans un Modal Bootstrap

Version imprimable

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:

1 2 3 4 5 6 <td><?php echo $name ?></td> <td><?php echo $nif ?></td> <td><?php echo $adresse ?></td>  <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:

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>

09/02/2023, 15h09
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
09/02/2023, 15h46
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.

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:

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:

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.

09/02/2023, 18h33
RastaBomboclat

Toufik83

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

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... :calim2:
Citation:
Envoyé par Toufik83
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:

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?:aie: je me suis un peu perdu.

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:

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".

4 pièce(s) jointe(s)

Citation:

Envoyé par Toufik83

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:

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:

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.):
Pièce jointe 634101 Pièce jointe 634102 Pièce jointe 634103 Pièce jointe 634104

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... ✌

Bonjour,

Si vous n'avez plus d'alerte d'erreur, c'est bon mais il faudrait aussi vérifier la console du navigateur pour voir s'il y'en a ..., car d'après votre code HTML et la structure du tableau, je vois que vous avez utilisé 5 <th> (les colonnes N° et Details sont commentées)
Code:

1 2 3 4 5 6 7  <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> 
Alors que les éléments de "columns" sont 6
Code:

1 2 3 4 5 6 7 8 columns:[ {data:"id_Client"}, {data:"nom_Client"}, {data:"NIF_Client"}, {data:"adresse_Client"}, {data:"tel_Client"}, {data:"email_Client"}, ]
Il faudrait avoir le même nombre d'éléments columns que les <th> des <thead> et <tfoot>, sinon vous aurez une autre erreur dans la console qui ressemble à trying to get style of undefined.

DataTable parcourt les éléments de "columns" pour collecter des informations sur chaque <th> du tableau, et donc si vous mettez 5 <th> et que vous avez 6 éléments dans "columns", le dernier est donc undefined, et ça provoque une erreur et le tableau n'est pas affiché.

Donc vous devriez mettre 6 <th> + le <th> du bouton détails à la fin, ça fait 7 colonnes, et rajouter un élément (l'ordre est important) dans "columns" comme je vous ai montré dans le message précédent afin d'avoir un tableau comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 columns:[ {data:"id_Client"}, {data:"nom_Client"}, {data:"NIF_Client"}, {data:"adresse_Client"}, {data:"tel_Client"}, {data:"email_Client"}, { data:null,//pas de donnée pour cette colonne, on utilise plutôt le render pour générer le bouton 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>'; } } ]
Sauf que vous n'avez pas encore rajouté la valeur de DT_RowId dans les données de la requête, vous pouvez donc utiliser la clé primaire id_Client pour initialiser la valeur de DT_RowId vu que c'est un id unique de chaque client.

C'est dans la boucle while que ça se passe :
Code:

1 2 3 4 while($d=$stmtData->fetch()){ $d["DT_RowId"]=$d["id_Client"];//rajoutez ceci $data['data'][]=$d; }
Je vois aussi que la une colonne "tel_Client" est en double ici "where nom_Client like :col or tel_Client like :col or tel_Client like :col "; et que vous n'avez pas rajouté les autres colonnes..., ce n'est pas une erreur mais la recherche ne fonctionnera que sur les colonnes "nom_Client" et "tel_Client".

Si vous corrigez les colonnes, il est bien possible que l'erreur invalid JSON se redéclenche s'il y'a a une erreur PHP, vu que vous avez nommé l'objet PDO $connection et en dessous vous utilisez $pdo (variable indéfinie), renommez l'un ou l'autre...

Vous devriez donc voir l'onglet Réseau et Response de l'outil de développement pour avoir des détails sur l'erreur.

Je pense aussi que pour des raisons de confidentialité et sécurité, vous ne devriez pas afficher le "id_Client" dans une colonne, maisle sélectionner dans la requête pour l'utiliser seulement en arrière plan, et ne pas l'afficher aux utilisateurs comme ça ...

12/02/2023, 01h34
RastaBomboclat

1 pièce(s) jointe(s)

J'ai apporté toutes les corrections, conformément à tes recommendations.

En effet, j'ai une erreur vue de l'outil développement:
Pièce jointe 634126

Je vais essayer de charger le plugin via CDN. Apparemment le package que j'ai téléchargé directement du site officiel et de NPM ont quelques petits soucis. Je vois ce que ça va donner avec le CDN et je reviens.

Jusque là, toujours tableau vide, sans erreur.
12/02/2023, 01h46
Toufik83

Quand l'erreur est "cannot red propreties of undefined style", ceci est relative aux <th> ou "columns".

Je viens de voir une erreur que j'ai posté dans mon dernier message concernant la partie "columns", il y'avait une accolade de fermeture manquante à la ligne 17, désolé c'été mon erreur :aie:

J'ai corrigé tout ce qu'il y avait à corriger. Je travail en CDN, et maintenant dans l'outil développement il n'y a plus d'erreur. Mais dans la page, le navigateur me renvoi un message d'erreur disant:
DataTables warning: table id=myTable - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1.

Je vais encore voir si j'ai oublié quelque chose.

J'ai bien rajouter les colonnes dans la condition WHERE du SQL pour une recherche sur toutes les colonne (exception fait pour la colonne ID et la colonne de detail du bouton). J'ai aussi retouché le JS comme ceci:

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
<script>
        $(document).ready(function(){
            $('#myTable').DataTable({
                dom:'Bfrtip',
                buttons:['copy','csv','excel','pdf','print'],
                select: true,
                processing: true,
                serverSide: true,
                ajax: 'server_processing2.php',
                columns:[
                    {data:"id_Client"},
                    {data:"nom_Client"},
                    {data:"NIF_Client"},
                    {data:"adresse_Client"},
                    {data:"tel_Client"},
                    {data:"email_Client"},
                    {
                        data:null,
                        orderable:false, 
                        searchable:false,
                        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>';
                        }
                    },
                ]
            });
        });
    </script>

12/02/2023, 02h11
RastaBomboclat

Citation:

Envoyé par Toufik83

Je viens de voir une erreur que j'ai posté dans mon dernier message concernant la partie "columns", il y'avait une accolade de fermeture manquante à la ligne 17, désolé c'été mon erreur :aie:

Je l'avais vu et aussitôt rajouté.
12/02/2023, 02h14
Toufik83

Regardez l'onglet Réseau, et cliquez sur XHR pour voir l'appel ajax de DataTable dans la liste au dessous, cliquez sur le lien puis regardez l'onglet response.

Normalement vous verrez le message d'erreur PHP.

Vous avancez... c'est bien.
12/02/2023, 02h53
RastaBomboclat

2 pièce(s) jointe(s)

Citation:

Envoyé par Toufik83

Regardez l'onglet Réseau, et cliquez sur XHR pour voir l'appel ajax de DataTable dans la liste au dessous, cliquez sur le lien puis regardez l'onglet response.

Normalement vous verrez le message d'erreur PHP.

En effet, il y a un problème au niveau des Limit SQL la variable $limit .

L'outil developpeur:
Pièce jointe 634127

Dans le fichier server_processing:
Pièce jointe 634128

Citation:

Envoyé par Toufik83

Vous avancez... c'est bien.

8-) Merci!
12/02/2023, 03h01
Toufik83

Oui, mais ce n'est pas limit, mais plutôt la clause order by, parce que on a inversé ses paramètres..., je vous signale que je n'ai pas testé le code avant de le poster.

Corrigez là, et inverser les variables après "order by" comme ça :

Code:

$order["column"]." ".$order["dir"]
12/02/2023, 03h16
RastaBomboclat

2 pièce(s) jointe(s)

Citation:

Envoyé par Toufik83

Code:

$order["column"]." ".$order["dir"]

Correction apportée.

Mais la même message d'erreur continue toujours. Et j'ai remarqué une autre erreur Call StacPièce jointe 634129 Pièce jointe 634130

D'accord, je vois pourquoi, apparemment $order["column"]=0 et donc la partie de order by devient :
order by 0 asc, ce qui est une erreur de syntaxe SQL, pour le moment remplacez cette variable par un nom de colonne comme par exemple id_Client comme ça :
" order by id_Client ".$order["dir"]
Sinon, il y'a un moyen plus propre pour récupérer automatiquement le nom de la colonne de tri si vous utilisez la variable $_REQUEST["columns"].

Mais d'abord il faut attribuer une propriété "name" à chaque élément (sauf le dernier élément, parce que c'est un bouton généré via js) de "columns" au niveau JS :
Code:

1 2 3 4 5 6 7 8 9 columns:[ {data:"id_Client",name:"id_Client"}, {data:"nom_Client",name:"nom_Client"}, {data:"NIF_Client",name:"NIF_Client"}, {data:"adresse_Client",name:"adresse_Client"}, {data:"tel_Client",name:"tel_Client"}, {data:"email_Client",name:"email_Client"}, {data:null.....}//pas la peine pour le dernier élément ]
Puis au niveau PHP :
Code:

1 2 3 4 5 6 7 8 /*code précédent ....*/ $order=$_REQUEST["order"][0];//ça vous l'avez déjà //rajoutez ceci $columns=$_REQUEST["columns"]; //et ceci $columnOrderName=$columns[$order["column"]]["name"];
puis remplacez $order["column"] par $columnOrderName dans la requête plus bas.

12/02/2023, 03h38
RastaBomboclat

3 pièce(s) jointe(s)

Il y a toujours un blocage quelque part.
j'ai fait une capture d'écran de ma ligne 25 ou $order a été déclaré.

Pièce jointe 634131 Pièce jointe 634132 Pièce jointe 634133
12/02/2023, 03h47
RastaBomboclat

Je remplace ceci:

Citation:

Envoyé par Toufik83

" order by id_Client ".$order["dir"]

par cela:

Citation:

Envoyé par Toufik83

puis remplacez $order["column"] par $columnOrderName dans la requête plus bas.

je n'ai pas bien compris.8O:calim2:
12/02/2023, 03h54
Toufik83
Ajoutez ces deux variables juste après la variable $order :
Code:

1 2 $columns=$_REQUEST["columns"]; $columnOrderName=$columns[$order["column"]]["name"];
et dans la requête en dessous, utilisez $columnOrderName à la place de $order["column"] :

Code:

$pdo->prepare($select.$colonnes.$from.$where." order by ".$columnOrderName." ".$order["dir"]." limit ".$offset." , ".$limit);

Citation:
Envoyé par Toufik83
D'accord, je vois pourquoi, apparemment $order["column"]=0 et donc la partie de order by devient :
order by 0 asc, ce qui est une erreur de syntaxe SQL, pour le moment remplacez cette variable par un nom de colonne comme par exemple id_Client comme ça :
" order by id_Client ".$order["dir"]
Sinon, il y'a un moyen plus propre pour récupérer automatiquement le nom de la colonne de tri si vous utiliser la variable $_REQUEST["columns"].

Mais d'abord il faut attribuer une propriété "name" à chaque élément (sauf le dernier élément, parce que c'est un bouton généré via js) de "columns" au niveau JS :
Code:

1 2 3 4 5 6 7 8 9 10 columns:[ {data:"id_Client",name:"id_Client"}, {data:"nom_Client",name:"nom_Client"}, {data:"NIF_Client",name:"NIF_Client"}, {data:"adresse_Client",name:"adresse_Client"}, {data:"tel_Client",name:"tel_Client"}, {data:"email_Client",name:"email_Client"}, {data:null.....}//pas la peine pour le dernier élément ]
Puis au niveau PHP :
Code:

1 2 3 4 5 6 7 8 /*code précédent ....*/ $order=$_REQUEST["order"][0];//ça vous l'avez déjà //rajoutez ceci $columns=$_REQUEST["columns"]; //et ceci $columnOrderName=$columns[$order["column"]]["name"];
puis remplacez $order["column"] par $columnOrderName dans la requête plus bas.
ÇA MARCHE!!! :bravo::applo::chin::yaisse2:

12/02/2023, 04h01
Toufik83

Bravo ;), le plugin est désormais fonctionnel 8-), maintenant il faut lire la documentation pour comprendre comment récupérer les données d'une ligne <tr> lors d'un clic sur le bouton de details.

Vous avez dépassé la partie la plus difficile, ils vous restent quelques petites retouches et la gestion des événements JS.
12/02/2023, 04h02
RastaBomboclat

Franchement, quand j'aurais mis RÉSOLU, je reviendrai sur cette même discussion pour y poster le projet en entier, de telle sorte que ceux qui en auront besoin puisse l'avoir deja tout prêt à l'emploi et où il ne faudra que changer et adapter une ou deux petites choses. Sans avoir besoin de lire tous les postes de cette discutions.
Merci Toufik83 pout ta patience et ton aide et cette engagement BENEVOLE en plus!

il ne reste plus que d'afficher le Modal de Bootstrap et le projet est complet.
12/02/2023, 04h05
RastaBomboclat

Citation:

Envoyé par Toufik83

Vous avez dépassé la partie la plus compliquée, et je pense que l'attribution des événements JS n'est pas un problème pour vous.

Je préfère d'abord savourer cette phase et travailler dans la journées la suite(le reste). Ainsi je serai pêt pour lundi.
Merci encore.

Bonjour à tous,

Le plugin DataTables fonction bien ave mes informations de ma base de données. Mais je n'ai pas encore atteint mon but, comme décris en titre de cette discussion.
Je n'arrive pas afficher un Modal Bootstrap en cliquant sur le bouton Details de ma table. J'ai essayé de le faire pas à pas, c'est-à-dire: afficher d'abord le Modal puis travailler sur le code qui y affichera les informations relatives à l'ID du button. Mais meme afficher le Modal, ça ne marche pas encore.

voici mon code JS:

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
 
$(document).ready(function(){
            $('#myTable').DataTable({
                dom:'Bfrtip',
                buttons:[
                    'copy',
                    'csv',
                    'excel',
                    'pdf',
                    'print',
                ],
                select: true,
                scrollY:415,
                scrollX: true,
                processing: true,
                serverSide: true,
                ajax: 'server_processing2.php',
                columns:[
                    {data:"id_Client",name:"id_Client"},
                    {data:"nom_Client",name:"nom_Client"},
                    {data:"NIF_Client",name:"NIF_Client"},
                    {data:"adresse_Client",name:"adresse_Client"},
                    {data:"tel_Client",name:"tel_Client"},
                    {data:"email_Client",name:"email_Client"},
                    {
                        data:null,
                        orderable:false, 
                        searchable:false,
                        render:function(data,display,dataRow,settings){
                            return '<button type="button" id="mybtn'+ dataRow.DT_RowId+'" '+'class="btn btn-primary mybtn" data-toggle="modal" data-target="myModal">Details</button>';
                        }
                    },
                ]
            });
            //Script que j'ai trouvé dans le forum de DataTables.net
            $('#myTable body ').on('click', 'button', function (event) {
                var row = $(this).closest("tr").get(0);
                var aData = table.row(row).data();
                $('#DTmyModal').modal('show');
                event.stopImmediatePropagation(); 
            });            
        });

Mon code PHP où se trouve le Modal:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!-- myModal -->
    <div class="modal" id="DTmyModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-dark">RastaBomboclat</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" $times;></span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="text-justify text-dark">Teste du Modal:<?php echo 'Wagwan Rastai'?></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Bonjour,

une <table> n'a pas d'enfant <body> mais plutôt un <tbody>, et en plus vous utilisez une variable table indéfinie dans le script de clic.

Commencez d'abord par stocker l'instance de DataTable dans la variable table lors de l'initialisation comme ça :
Code:

1 2 3 var table=$('#myTable').DataTable({ /*les options*/ });
puis l'événement clic :
Code:

1 2 3 4 5 6 7 8 $('#myTable tbody').on('click', 'button', function (event) { var row = $(this).closest("tr").get(0); var aData = table.row(row).data(); $('#DTmyModal').modal('show'); event.stopImmediatePropagation(); //mettez un console.log ici pour voir le contenu de aData : console.log("data row is :",aData); });
Et comme vous utilisez select:true dans les options de DataTable, vous avez une autre possibilité pour récupérer les données des lignes sélectionnées, donc vous avez le choix, soit d'utiliser le bouton de la colonne soit utiliser les lignes sélectionnées, à vous de choisir ce qui vous convient le plus....

Utilisez toujours des console.log dans votre code pour suivre les choses ...

14/02/2023, 10h57
RastaBomboclat

3 pièce(s) jointe(s)

Bonjour à tous,
Bonjour Toufik83,

J’ai retouché mon code et corrigé les erreurs que tu m’as montré, mais le bouton Details ne fonctionne toujours pas. Dans la Console, j’ai une erreur comme le montre l’image ci-dessous. Modal n’est pas une fonction.
Pièce jointe 634223

Quand je commente la ligne du Modal, j’ai un retour dans la console qui donne les détails du bouton cliqué (voir l’image ci-dessous).
Pièce jointe 634225
Pièce jointe 634224

Mais mon objectif reste le même : utiliser l’ID stocker dans l’évènement clique du bouton Details pour exécuter une autre requête SQL sur la base de données et l’afficher dans un Modal Bootstrap.

Encore une fois, merci d'avance pour vos contribution et votre patience.:plusser:
14/02/2023, 14h19
Toufik83

Bonjour,

L'erreur est relative à bootstrap et pas au bouton, parce que le dernier fonctionne et vous retourne les données de la ligne dans la console.

Ceci provoque une erreur parce que probablement vous chargez bootstrap avant jQuery, ou bien vous utilisez plusieurs <script> jQuery.

Revérifier l'ordre des fichiers et mettez une seule version jQuery en premier puis bootstrap après.

Il vaut mieux mettre le code dans une balise [code]/*le code ici*/[/code] au lieu d'utiliser des images, c'est beaucoup mieux pour la lisibilité.
14/02/2023, 17h33
RastaBomboclat

Bonjour Toufik83,

Je ferai en sorte d'envoyer le moins d'image possible :lol:

Merci encore, le bouton fonctionne: en le cliquant le Modal s'affiche. C'était, comme tu l'a dit, l'ordre des link JS (jEQuery et Bootstrap...).

Maintenant il ne me reste plus qu'à recuperer l'ID du bouton pour l'utiliser dans une requete SQL et pouvoir afficher les information souhaiter dans ce Modal.
14/02/2023, 21h36
Toufik83
Quelles sont les informations que vous voulez récupérer avec la nouvelle requête ajax ?

Si c'est seulement les données de la ligne cliquée, vous devriez utiliser le contenu de la variable aData qui est un objet JS que vous pouvez donc accéder à ses propriétés via un point, par exemple pour récupérer le id_Client, vous mettez :
Code:

1 2 let idClient=aData.id_Client; console.log("id client de la ligne sélectionnée est :",idClient);
La même chose pour les autres valeurs...

Sinon, et si vous voulez joindre la table service avec la clé primaire de la table client, eh ben ceci doit être fait dans la requête qui alimente DataTable, et construire les colonnes en combinant les deux tables, et vous affichez seulement les colonnes dont vous avez besoin (les plus importantes), pas toutes...

:alerte: Attention, si un Client est affiché plusieurs fois sur la même page de la table, il y'aura un problème de redondance de ID, et donc vous aurez plusieurs <tr> avec le même id et aussi les boutons de détails (et ça ce n'est pas OK), vu qu'on a utilisé la colonne id_Client comme DT_RowId.

Vérifiez donc que les ID des <tr> sont différents via l'inspecteur du navigateur.
15/02/2023, 00h05
RastaBomboclat

Bien reçu. Je m'y mets tout de suite.
Au fait je voulais faire une requête où je joins deux puis plusieurs tables ( INNER JOIN . Je pourrais ainsi affiché des infos en relation via les clés étrangères.

Je fais ces testes avec plusieurs tables pour que j'ai un modèle sue je pourrais réutiliser à volonté. Et comme je l'ai déjà dit, je le publierai comme Code_Souce prêt à l'emploi pour tous ceux qui auraient les mêmes besoins sue moi.
16/02/2023, 16h51
RastaBomboclat

Citation:

Envoyé par Toufik83

Sinon, et si vous voulez joindre la table service avec la clé primaire de la table client, eh ben ceci doit être fait dans la requête qui alimente DataTable, et construire les colonnes en combinant les deux tables, et vous affichez seulement les colonnes dont vous avez besoin (les plus importantes), pas toutes...

:alerte: Attention, si un Client est affiché plusieurs fois sur la même page de la table, il y'aura un problème de redondance de ID, et donc vous aurez plusieurs <tr> avec le même id et aussi les boutons de détails (et ça ce n'est pas OK), vu qu'on a utilisé la colonne id_Client comme DT_RowId.

Vérifiez donc que les ID des <tr> sont différents via l'inspecteur du navigateur.

Bonjour ,

La requête avec INNER JOIN affiche bien les informations désirées, j'en suis satisfait. Mais pour le teste final : afficher des informations supplémentaires dans le Modal a partir de l'ID soit de la table Client, soit de la table Service, je fonctionne pas.
Je n'affaive pas à attraper un ID et m'en servir pour afficher une quelconque info dans le Modal. En plus dans l'inspecteur du navigateur, Fetch/XHR retourne en Reponse toutes les données des deux tables. Le boutton n'affiche pas l'information d'une seule ligne, la ligue en question ou celles du bouton cliqué, mais toute la base de données.
16/02/2023, 22h31
Toufik83

Bonjour,

D'après ce que je vois, vous n'avez pas utilisé une clause group by afin de grouper les lignes et virer les doublons.

Montrez les modifications que vous avez apportées aux fichiers JS et PHP pour comprendre ce qui se passe....
16/02/2023, 22h59
RastaBomboclat

Citation:

Envoyé par Toufik83

Bonjour,
D'après ce que je vois, vous n'avez pas utilisé une clause group by afin de grouper les lignes et virer les doublons.

Je vais les commande de regroupement et je reviens.

Citation:

Envoyé par Toufik83

Montrez les modifications que vous avez apportées aux fichiers JS et PHP pour comprendre ce qui se passe....

Le code JS n'a pas de grand changement c'est plutôt dans le fichier du server_processing qu'il y a des grand changement au niveau de la requête SQL.
16/02/2023, 23h07
Toufik83

Je pense que vous devriez modifier aussi les columns JS de DataTable, et afficher seulement les colonnes importantes des deux tables MYSQL afin d'avoir une seule table HTML représentant les deux.

C'est l'intérêt des jointures mysql ...