Tableau dynamique avec bouton de validation
Bonjour,
je doit développer un tableau permettant de lire en temps réél les donnée d'une base de donnée et de l'afficher dans un tableau avec un bouton sur chaque ligne permettant de valider la ligne.
Je souhaite développer l'index en html et javascript pour pouvoir l'encapsuler avec cordova pour faire une appli smartphone.
J'ai donc index.html
Code:
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
| <html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script>
function update_data(){
$.getJSON('http://localhost/supervision/names.php', function (data) { // fonction de retour, data est le tableau renvoyé par json_encode du php
console.log(data);
var tr;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].Num + "</td>");
tr.append("<td>" + data[i].Last_Name + "</td>");
tr.append("<td>" + data[i].Company + "</td>");
tr.append("<td>" + data[i].LastPassDoor + "</td>");
tr.append("<td>" + data[i].Quai + "</td>");
tr.append("<td>" + "<input type='submit' id='button' value='Valider' />" + "</td>");
$('table').append(tr);
$("#button").click(function(){
$.post("validation.php", {number : data[i].Num});
});
}
});
}
$(document).ready(function(){
update_data();
//setInterval(function(){ update_data()}, 1000); //requete toutes les 1secondes
});
</script>
</head>
<body>
<form name="autoriser" method="post" action="index.php">
<p style="text-align:center">
<span style="font-size: 18pt;">Liste des camions</span><br>
</p>
<table class="tableau">
<thead>
<tr class="entete">
<th>Numero RDV</th>
<th>Nom</th>
<th>Company</th>
<th>Status</th>
<th>Quai</th>
<th>Valider</th>
</tr>
</thead>
</table>
</form>
</body>
</html> |
et le names.php permettant d'échanger avec le serveur SQL
Code:
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
| <?php
header("Content-Type: application/json");
include('function.php');
$conn = connexion_DB();
// on selectionne les personnes sur site qui ne sont pas passé par le lecteur de sortie;
$strSQL = "SELECT Num, Last_Name, LastPassDoor FROM rptRollCall WHERE LastPassDoor != 'Lecteur sortie' ";
$result = sqlsrv_query($conn, $strSQL) or die( print_r( sqlsrv_errors(), true));
$array = array();
while( $row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
// On cherche le nom de la company et du quai dans CRDHLD
$last_name=$row["Last_Name"];
$SQL = "SELECT Company, Quai FROM CRDHLD WHERE Last_Name='$last_name'";
$crdhld_result = sqlsrv_query($conn, $SQL) or die( print_r( sqlsrv_errors(), true));
$row2 = sqlsrv_fetch_array( $crdhld_result, SQLSRV_FETCH_ASSOC);
//on genere le statut et colore les lignes
switch($row["LastPassDoor"]){
case "Lecteur entree":
$status="En entrée";
$class="ligne_lime";
break;
case "Lecteur chargement":
$status="Chargement / Déchargement";
$class="ligne_yellow";
break;
case "Lecteur sortie":
$status="En sortie";
$class="ligne";
break;
case NULL:
$status="Zone d'attente";
$class="ligne_red";
break;
}
$array[] = $row + $row2;
}
echo json_encode($array);
sqlsrv_free_stmt($result);
sqlsrv_free_stmt($crdhld_result);
sqlsrv_close ($conn);
?> |
Ce code fonctionne et me renvoie les 2 lignes de ma table mais:
- Le bouton input en fin de tableau ne fonctionne pas et me redirige vers une page index.php
- La boucle de mise à jour appelant update_data() affiche 2 lignes supplémentaires toutes les secondes
- Il peut y avoir jusque 10 clients sur ce site et afin de soulager les requetes de names.php vers le serveur SQL, je faire tourner en boucle la lecture de la base dans name.php et stocker les infos dans un tableau que l'index.php viendrait lire. Qu'en pensez vous?
Merci pour votre aide
