Affichage des données en 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
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.
Avec plaisir, des fois se compliquer la vie n'est pas la meilleure des solutions ! Bon dev
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
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