Ajax et Datatable
Nicolas Groelly
Bonjour,
j'ai une application web pour faire de la gestion de projet et du pointage, chaque utilisateur pointe par semaine et par projet, il y a donc un tableau avec en ligne les projets et en colone les semaines.
Ma question fait suite à ce sujet : https://www.grafikart.fr/forum/topics/27024
Ce que je fais
Chaque case du tableau est un champ d'un formulaire. Lorsque l'utilisateur change la valeur d'une case, un appel ajax est effectué et retourne le nombre d'heure pointées et restant à pointer ; avec le retours je met a jour l'entête.
<?php
require_once("XXXXXXXXXX/classes/Scores.Class.php");
$year = date('Y', time());
$week = date('W', time());
$score = new Scores();
$datas = $score->getAllProjectsForUser($_SESSION['user']['id']);
if (!isset($_GET['from']) || $_GET['from'] > $_GET['to']) {
$from = date('W', time()) - 4;
} else {
$from = $_GET['from'];
}
if (isset($_GET['to']) && $_GET['from'] < $_GET['to']) {
$to = $_GET['to'];
} else {
$to = date('W', time()) + 1;
}
?>
<h1>Pointage</h1>
<h2>Choix des semaines</h2>
<form onsubmit="event.preventDefault();">
<label>Du</label> <input type="number" name="from" id="from" value="<?php echo $from; ?>" required>
<label>au</label> <input type="number" name="to" id="to" value="<?php echo $to; ?>" required>
<input type="submit" value="Go" onClick="JavaScript:choix()" >
</form>
<a href="<?php echo $config_url; ?>/scores/exports/excel/<?php echo $_SESSION['user']['id']; ?>/<?php echo $from; ?>/<?php echo $to; ?>" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Export Excel</a>
<table id="projects" class="display">
<caption>Pointage des semaines <?php echo $from; ?> à <?php echo $to; ?></caption>
<thead>
<tr>
<th style="width:400px;"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<?php $i = $from; while ($i <= $to): ?>
<th style="width:30px;"><?php echo $i++; ?></th>
<?php endwhile; ?>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>A pointer</th>
<?php $i = $from; while ($i <= $to): ?>
<th style="width:30px;"><?php echo $score->getTimetodo($year, $i++); ?></th>
<?php endwhile; ?>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>Pointées</th>
<?php $i = $from; while ($i <= $to): ?>
<th style="width:30px;" id="u-<?php echo $i; ?>"><?php echo $score->usedTimePerWeek($year, $i++, $_SESSION['user']['id']); ?> </th>
<?php endwhile; ?>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>Restant</th>
<?php $i = $from; while ($i <= $to): ?>
<th style="width:30px;" id="r-<?php echo $i; ?>"><?php echo $score->tempsRestant($year,$i++, $_SESSION['user']['id']); ?> </th>
<?php endwhile; ?>
</tr>
<tr>
<th style="width:400px;">Projet</th>
<th>Code Geremi</th>
<th>Activité TL</th>
<th>Activité EE</th>
<th>Code C6</th>
<th>Nombre d'heures allouées</th>
<th>Nombre d'heures consommées</th>
<th>Nombre d'heures restantes</th>
<?php $i = $from; while ($i <= $to): ?>
<th style="width:30px;"><?php $i++; ?></th>
<?php endwhile; ?>
</tr>
</thead>
<tbody>
<!-- Boucle projets -->
<?php foreach($datas as $k => $v): ?>
<tr>
<td><?php echo $v['title']; ?></td>
<td><?php echo $v['geremi']; ?></td>
<td><?php echo $v['tl']; ?></td>
<td><?php echo $v['ee']; ?></td>
<td><?php echo $v['c6']; ?></td>
<td><?php if(empty($v['time']) && ($v['time_tl'] == -1 || $v['time_ee'] == -1)) { echo 'Au réel'; } else { echo $v['time']; } ?></td>
<td id="pu-<?php echo $v['id']; ?>"><?php echo $score->usedTime($v['id'], $_SESSION['user']['id']); ?></td>
<td id="pr-<?php echo $v['id']; ?>"><?php echo $score->remaining($v['id'], $_SESSION['user']['id']); ?></td>
<!-- Boucle semaines -->
<?php $i = $from; while ($i <= $to): ?>
<td style="width:80px;"><input style="width:50px;" type="number" value="<?php echo $score->getScore($year, $i, $_SESSION['user']['id'], $v['id']); ?>" min="0" name="test" id="<?php echo $year .'-'. $i .'-'. $v['id']; ?>" onChange="JavaScript:autosave('<?php echo $year .'-'. $i .'-'. $v['id']; ?>', '<?php echo $i++; ?>', '<?php echo $v['id']; ?>');" /></td>
<?php endwhile; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#projects').DataTable({
fixedHeader: true,
bPaginate: false
});
});
</script>
<script type="text/javascript">
function autosave(param, i, v) {
element = document.getElementById(param).value;
console.log(element);
xhr = getXMLHttpRequest();
xhr.open("POST", "<?php echo $config_url; ?>/modules/Scores/autosave.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("¶m=" + param + "&time=" + element);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
obj = JSON.parse(xhr.responseText);
document.getElementById("u-" + i).innerHTML=obj.u;
document.getElementById("r-" + i).innerHTML=obj.r;
document.getElementById("pu-" + v).innerHTML=obj.pu;
document.getElementById("pr-" + v).innerHTML=obj.pr;
}
}
};
};
function choix() {
from = document.getElementById("from").value;
to = document.getElementById("to").value;
url = "<?php echo $config_url; ?>/scores/my/" + from + "/" + to;
window.location=url;
};
</script>Ce que je veux
Décrivez ici ce que vous cherchez à obtenir
Ce que j'obtiens
Lorsque je suis au début du tableau, le système fonctionne, losque je scroll je fix l'entête et la mise à jour ne se fait plus. Dans le réseau, je vois que les requettes ajax ont étés faites et qu'il y a les valeurs.
