I want to update my generated table in my php file only when there are changes in the database table but i don't know how to do this. After reading all the many similar questions i still haven't come close to understanding what it is that I am supposed to do.
Im displaying my table within this div <div id="table_holder" class="table-responsive" style="height: 300px;"></div> within my main.php
and this is the JS that I'm using to refresh the table every 5 seconds.
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#table_holder').load('live_table_data.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
This is how im displaying my table in live_data_table.php
$result = $conn->query("select date,student_id, s.s_name as Name, s.s_lname as Last, s.s_email as Email, time from attendance_record A
inner join student s on A.student_id = s.s_id
inner join session b on A.session_id = b.session_id
where b.module_id = 7 and A.date = '2017-03-20' and b.start_time = '16:00'");
?>
<table class="table-responsive" id="live_table">
<thead>
<tr >
<th>Student ID</th>
<th>Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Arrival</th>
<th>Date</th>
</tr>
</thead>
<tbody style="overflow: auto">
<?php
while ($row = $result->fetch_assoc()) {
unset($student_id, $Name, $Last, $Email, $time, $date);
$student_id = $row['student_id'];
$Name = $row['Name'];
$Last = $row['Last'];
$Email = $row['Email'];
$time = $row['time'];
$date = $row['date'];
echo "<tr>";
echo "<td>".$student_id."</td>";
echo "<td>".$Name."</td>";
echo "<td>".$Last."</td>";
echo "<td>".$Email."</td>";
echo "<td>".$time."</td>";
echo "<td>".$date."</td>";
echo "</tr>";
}
?>
</tbody>
</table>
My problem is that I've no idea how to dynamically update the table based on if and only if there is a change within the database