Filtrer les données d'un tableau
JEAN KIBA
Bonjour, j'ai un souci qui me bloque pour terminer un projet, j'ai un tableau en html qui permet d'illustrer les données provenant de la base des données MySql. J'ai créé trois fichiers:
- form_client.php: affiche les informations du tableau
- client.js: permet de récupérer les informations avec ajax
- search_client: pour communiquer avec la base des données
1. form_client.php
<div class="row g-4 mb-3">
<div id="message-show"></div>
<div class="col-auto"><label for="search" class="col-form-label">Select:</label></div>
<div class="col-auto">
<select type="text" id="num_select" class="form-select form-select-sm">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
</div>
<div class="col-6"></div>
<div class="col-auto"><label for="choix" class="col-form-label">Search:</label></div>
<div class="col-auto"><input type="text" id="search_client" class="form-control form-control-sm"></div>
</div>
<table class="table table-hover table-light table-striped" >
<thead>
<tr class="bg-primary text-light bg-gradient bg-opacity-150 text-uppercase">
<th class="px-1 py-1">code</th>
<th class="px-1 py-1">Nom</th>
<th class="px-1 py-1">Prénom</th>
<th class="px-1 py-1">date de naissance</th>
<th class="px-1 py-1">Adresse</th>
<th class="px-1 py-1 ">Options</th>
</tr>
</thead>
<tbody class="table-group-divider " id="clientData"></tbody>
<tfoot>
<tr class="bg-primary text-light bg-gradient bg-opacity-150 text-uppercase">
<th class="px-1 py-1">code</th>
<th class="px-1 py-1">Nom</th>
<th class="px-1 py-1">Prénom</th>
<th class="px-1 py-1">date de naissance</th>
<th class="px-1 py-1">Adresse</th>
<th class="px-1 py-1 ">Options</th>
</tr>
</tfoot>
</table> 2. client.js
$(document).ready(function () {
getData();
});
);
function getData() {
$.ajax({
type: "GET",
url: "search_client.php",
success: function (response)
{
//console.log(response);
$.each(response, function (key,value) {
let date1 = new Date(value['datenaiss_cli']);
let datelocale = date1.toLocaleDateString('fr-FR',
{
//weekday:'long',
year:'numeric',
month:'long',
day:'numeric',
//hour:'numeric',
//minute:'numeric',
//second:'numeric'
});
$('#clientData').append(
'<tr>'+
'<td class = "id_cli">'+value['id_cli']+'</td>\
<td>' +value['nom_cli']+'</td>\
<td>' +value['prenom_cli']+'</td>\
<td>' + datelocale +'</td>\
<td>' +value['adresse_cli']+'</td>\
<td class="align-items-center" style="width:15%;">\
<a href="#" class="btn btn-success btn-sm Edit"><i class="bi bi-pencil-square" title="Modifier"></i></a>\
<a href="#" class="btn btn-danger btn-sm delete"><i class="bi bi-trash3-fill" title="Supprimer"></i></a>\
<a href="#" class="btn btn-primary btn-sm addUser"><i class="bi bi-plus-circle" title="Ajouter en tant que user"></i></a>\
</td>\
</tr>'
);
});
}
});
}3. search_client.php
require_once('Clients.php');
$clients = new Clients();
$query_run = $clients->getClients();
$result_array = [];
if($query_run > 0)
{
foreach($query_run as $row)
{
array_push($result_array, $row);
}
header("Content-type:application/json");
echo json_encode($result_array, JSON_UNESCAPED_UNICODE);;
}
else
{
echo $return = "<h4>Aucune donnée trouvée</h4>";
}Jusqu'ici, ça marche bien, mais lorsque je veux filtrer les données à partir d'un champs, je n'arrive pas à trouver la solution. J'ai vraiment besoin d'aide pour me sortir de la difficulté que j'ai. Ma difficulté se trouve du côté javascript
Voici le code que j'ai utilisé pour filtrer les données
document.getElementById("search_client").addEventListener("keyup", getData);
let text = document.getElementById("search_client").value;
if(text != ""){
$.ajax({
type: "POST",
url: "load.php",
data: {"text:text"},
success: function (response)
{
//console.log(response);
$.each(response, function (key,value) {
let date1 = new Date(value['datenaiss_cli']);
let datelocale = date1.toLocaleDateString('fr-FR',
{
//weekday:'long',
year:'numeric',
month:'long',
day:'numeric',
//hour:'numeric',
//minute:'numeric',
//second:'numeric'
});
$('#clientData').append(
'<tr>'+
'<td class = "id_cli">'+value['id_cli']+'</td>\
<td>' +value['nom_cli']+'</td>\
<td>' +value['prenom_cli']+'</td>\
<td>' + datelocale +'</td>\
<td>' +value['adresse_cli']+'</td>\
<td class="align-items-center" style="width:15%;">\
<a href="#" class="btn btn-success btn-sm Edit"><i class="bi bi-pencil-square" title="Modifier"></i></a>\
<a href="#" class="btn btn-danger btn-sm delete"><i class="bi bi-trash3-fill" title="Supprimer"></i></a>\
<a href="#" class="btn btn-primary btn-sm addUser"><i class="bi bi-plus-circle" title="Ajouter en tant que user"></i></a>\
</td>\
</tr>'
);
});
}
});
}
else{
getData();
}