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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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

Voir 40 message(s) de cette discussion en une page