Discussion :

[Toufik83]

Ajoutez ces deux variables juste après la variable $order :

Code :

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

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 :

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

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

[RastaBomboclat]

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 :

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

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 :

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

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

[Toufik83]

Bravo , le plugin est désormais fonctionnel , 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.

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

[RastaBomboclat]

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.

[RastaBomboclat]

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 :

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
 
$(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 :

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

[Toufik83]

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 :

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

1
2
3
var table=$('#myTable').DataTable({
     /*les options*/
});

puis l'événement clic :

Code :

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

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

[RastaBomboclat]

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.




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



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.

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

[RastaBomboclat]

Bonjour Toufik83,

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

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.

[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 :

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

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

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.

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

[RastaBomboclat]

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

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.

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

[RastaBomboclat]

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.

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.

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