Affichage des données en javascript

Par JEAN KIBA, il y a 1 an

Les bases HTML/CSS
PHP
Javascript

Bonjour à tous, je suis sur un petit projet de gestion d'une ecole. je viens de rencontrer un souci un script javascript. le soucis se presente au niveau d'affichage des données dans un table html. Besoin d'aide pour me savoir ce qui ne va pas avec le script.
Ma partie HTML

<table class="table table-striped table-hover table-sm mt-3"> <thead class="table-primary"> <tr class="table-primary" style="text-transform: uppercase;"> <th scope="col" style="font-weight: 700;">Nom</th> <th scope="col" style="font-weight: 700;">Postnom</th> <th scope="col" style="font-weight: 700;">Prenom</th> <th scope="col" style="font-weight: 700;">Site</th> <th scope="col" style="font-weight: 700;">Ecole</th> <th scope="col" style="font-weight: 700;">Option</th> </tr> </thead> </table> <tbody id="results"> </tbody>

Ma partie js

getUsers(); function getUsers(){ $.ajax({ type: "POST", url: "Liste_User_Site_Ecole.php", success: function (response) { $.each(response, function (key, value) { $('#results').append( '</tr>'+ '<td class = "">'+value['id']+'</td>\ <td>' + value['nom'] +'</td>\ <td>' + value['postnom'] +'</td>\ <td>' + value['prenom'] +'</td>\ <td>' + value['site'] +'</td>\ <td>' + value['ecole'] +'</td>\ <td class="align-items-center">\ <a href="#" class="btn btn-success btn-sm Edit " ><i class="bi bi-pencil-square" title="Modifier"></i></a>\ <a href="#" class="btn btn-primary btn-sm delete" ><i class="bi bi-trash3-fill" title="Supprimer"></i></a>\ </td>\ </tr>' ) }); } }); }

Les données ne s'affichent pas. Besoin de votre aide s'il vous plaît, je suis sûr que je me suis trompé mais je n'arrive pas retrouver l'erreur

6 réponses

JEAN KIBA, il y a 1 an

Merci Aecy, c'est ce que j'avais fait et ça marche convenablement

Aecy, il y a 1 an

Avec plaisir, des fois se compliquer la vie n'est pas la meilleure des solutions ! Bon dev

kevinG73, il y a 1 an

Bonjour ,
pourrais tu aussi publier un aperçu du code de Liste_User_Site_Ecole.php ?

JEAN KIBA, il y a 1 an

KevinG73, bonjour, je me suis retrouvé, j'ai commis une erreur au niveau du script html: j'ai fermé la balise </table> avant d'insérer la balise <tbody></tbody> et au niveau de la tr, je l'ai fermée avant au lieu de l'ouvrir d'abord. On dirait j'étais déjà fatigué. Désolé de vous déranger

JEAN KIBA, il y a 1 an

Mais par contre j'ai un problème de logique dans mon code, et j'aurai besoin de votre aide. Après avoir trouvé la solution, je voulais inclure une méthode de recherche qui va me permettre de trier mes informations par nom, post nom ou prénom.
voici le script que j'ai tapé pour l'instant
la première fonction affiche tous les utilisateurs par défaut

function getUsers() { $.ajax ({ type: "GET", url: "Liste_User_Site_Ecole.php", }).done(function(response) { var res = JSON.stringify(response); response = JSON.parse(res); response.forEach(function(value) { $(".results").append( '<tr style="font-size: 12px;">'+ '<td class = "">'+value.id+'</td>\ <td>'+value.nom+'</td>\ <td>'+value.postnom+'</td>\ <td>'+value.prenom+'</td>\ <td>'+value.site+'</td>\ <td>'+value.ecole+'</td>\ <td class="align-items-center">\ <a href="#" class="btn btn-secondary btn-sm Edit" style="font-size: 12px;">Modifier</a>\ <a href="#" class="btn btn-secondary btn-sm delete" style="font-size: 12px;">Classe</a>\ </td>\ </tr>' ); }); }); }

la deuxième fonction devait me permettre de trier les informations de la première fonction

function fetchResults() { var query = $(this).val(); $.post("Liste_User_Site_EcoleByName.php",{ "search":true, "query":query, }).done(function(response){ var res = JSON.stringify(response); response = JSON.parse(res); response.forEach(function(value) { $(".results").append( '<tr style="font-size: 12px;">'+ '<td class = "">'+value.id+'</td>\ <td>'+value.nom+'</td>\ <td>'+value.postnom+'</td>\ <td>'+value.prenom+'</td>\ <td>'+value.site+'</td>\ <td>'+value.ecole+'</td>\ <td class="align-items-center">\ <a href="#" class="btn btn-secondary btn-sm Edit" style="font-size: 12px;">Modifier</a>\ <a href="#" class="btn btn-secondary btn-sm delete" style="font-size: 12px;">Classe</a>\ </td>\ </tr>' ); }); }); }

Mais le résultat que je suis en train d'obtenir n'est pas seul que je voulais, il ajoute les mêmes informations dans la table, comment doit procéder pour trouver la solution

Aecy, il y a 1 an

Pourquoi ne pas utiliser php pour récupérer directement tes données depuis la page courante pour ensuite foreach ton td ? Ce serait beaucoup plus simple que de call en AJAX je pense ? Tu pourrais également ajouter une condition de recherche (si elle est présente), ajouter une surcouche a ta requete avec une clause WHERE. Ce qui evite déjà pas mal de complexité niveau back et front.