插入新记录时如何自动刷新数据表？

Question

This is my code in data table fetching record:

<section class="content">
 <div class="row">
 <div class="col-xs-12">
  <div class="box">
  <div class="box-header">
 </div>
 <div class="box-body">
 <table id="example1" class="table table-bordered table-striped">
 <thead>
 <th>ID</th>
  <th>Date</th>
  <th>Name</th>
  <th>Course</th>
  <th>Purpose</th>
  <th>Time-in</th>
 <th>Time-out</th>

  </thead>
  <tbody>
  <?php
  include_once('Connection.php');
  $sql = "SELECT * FROM attendance";
  $result = mysqli_query($conn,$sql);
  if ($result->num_rows > 0) {
  while($row=mysqli_fetch_assoc($result)){
  ?>
  <tr>
 <td><?php  echo $row['id']?></td>
 <td><?php  echo $row['date']?></td>
 <td> <?php echo $row['name']?></td>
 <td> <?php echo $row['course']?></td>
<td> <?php echo $row['purpose']?></td>
<td> <?php echo $row['time-in']?> </td>
<td>
<?php echo $row['time-out']?>
</td>
</tr>
<?php }}?>
 </tbody>
  </table>
  </div>
   </div>
   </div>
    </div>
    </section>

This is the javascript I use:

<script src="bower_components/jquery/dist/jquery.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            setInterval(function () {
                $('#box-body').load('data.php')
            }, 2000);
        });
    </script>

Is there a way to auto refresh my data table when a new record is inserted?

I tried echoing my data table in separate note pad and calling it by div in my javascript code but it does not work.

Answer 1

The table should be ajax-based if you want to update data without page refresh. You should use Jquery datatables server-side processing scenario to do so and Here's the complete method for it:

https://datatables.net/examples/data_sources/server_side