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]

Toufik83

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

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

[Toufik83]

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

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

1
2
3
4
5
6
7
<!-- <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> -->

Alors que les éléments de "columns" sont 6

Code :

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

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 :

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

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

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

[RastaBomboclat]

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

En effet, j'ai une erreur vue de l'outil développement:


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.

[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

[RastaBomboclat]

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 :

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

[RastaBomboclat]

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

Je l'avais vu et aussitôt rajouté.

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

[RastaBomboclat]

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:



Dans le fichier server_processing:

Vous avancez... c'est bien.

Merci!

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

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

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

[RastaBomboclat]

Code php :

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

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

Correction apportée.

Mais la même message d'erreur continue toujours. Et j'ai remarqué une autre erreur Call Stac

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

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

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 :

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.

[RastaBomboclat]

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

[RastaBomboclat]

Je remplace ceci:

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

par cela:

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

je n'ai pas bien compris.