Обновление содержимого в таблице HTML с использованием PHP и AJAX

Question

Я пытаюсь обновить содержимое таблицы, нажав кнопку обновления на PHP с использованием соединения MySQL. Я хочу объединить Ajax и PHP, потому что, используя это, мне не нужно обновлять страницу каждый раз.

У меня нет никакой идеи для этого. И я ничего не нашел в Интернете. Поэтому я пришел сюда, чтобы спросить.

Здесь вы видите изображение, как выглядит моя текущая страница.

My table

код используется для создания/заполнения таблицы:

<div class="col-md-12"> 
    <h3 class="title">Active Tasks</h3> 
    <table class="table table-bordered table-condensed"> 
     <thead> 
      <tr> 
       <th>Task</th> 
       <th>Predecessor</th> 
       <th>Dev</th> 
       <th>MOSCOW</th> 
       <th>Plan</th> 
       <th>Do</th> 
       <th>Check</th> 
       <th>Act</th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody> 
      <?php 
      $query = mysqli_query($conn, $SQL); 
      while ($row = mysqli_fetch_array($query)) {?> 
      <tr class="active"> 
       <td style="display:none;><?php echo $row['ID'];?></td> 
       <td style="display:none;"><?php echo $row['ProjectID'];?></td> 
       <td><?php echo $row['Task'];?></td> 
       <td><?php echo $row['Predecessor'];?></td> 
       <td><?php echo $row['Dev'];?></td> 
       <td><?php echo $row['MOSCOW'];?></td> 
       <td class="js-Task-Plan"><?php echo $row['Plan'];?></td> 
       <td class="js-Task-Do"><?php echo $row['Do'];?></td> 
       <td><?php echo $row['Check'];?></td> 
       <td><?php echo $row['Act'];?></td> 
       <td> 
        <button type="button" class="js-TimerStart btn btn btn-default">Start</button> 
        <button type="button" class="js-TimerPauzeer btn btn-default">Pauzeer</button> 
        <button type="button" class="js-TimerResume btn btn-default">Resume</button> 

        <a class="btn btn-default btn-info" href="editTask.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Aanpassen</a> 
        <a class="btn btn-default btn-danger" href="delete_task.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Verwijderen</a> 
       </td> 
      </tr> 
      <?php } ?> 
     </tbody> 
    </table> 
    <button class="btn btn-block btn-default btn-success" name="UpdateTable"><span style="font-weight: bold;">Update</span></button> 
</div> 

Спасибо за каждый бит ответа и информации.

Answer 1

Положите его в отдельный скрипт:

     <?php 
          $query = mysqli_query($conn, $SQL); 
          while ($row = mysqli_fetch_array($query)) {?> 
           <tr class="active"> 
           <td style="display:none;><?php echo $row['ID'];?></td> 
           <td style="display:none;"><?php echo $row['ProjectID'];?></td> 
           <td><?php echo $row['Task'];?></td> 
           <td><?php echo $row['Predecessor'];?></td> 
           <td><?php echo $row['Dev'];?></td> 
           <td><?php echo $row['MOSCOW'];?></td> 
           <td class="js-Task-Plan"><?php echo $row['Plan'];?></td> 
           <td class="js-Task-Do"><?php echo $row['Do'];?></td> 
           <td><?php echo $row['Check'];?></td> 
           <td><?php echo $row['Act'];?></td> 
           <td> 
            <button type="button" class="js-TimerStart btn btn btn-default">Start</button> 
            <button type="button" class="js-TimerPauzeer btn btn-default">Pauzeer</button> 
            <button type="button" class="js-TimerResume btn btn-default">Resume</button> 

            <a class="btn btn-default btn-info" href="editTask.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Aanpassen</a> 
            <a class="btn btn-default btn-danger" href="delete_task.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Verwijderen</a> 
           </td> 
           </tr> 
          <?php } ?> 

и называют его 'Table.php'.

и добавить код JS, который будет делать AJAX вызов Table.php и обновить наш стол

$.ajax('table.php', { 
     success: function(data) { 
    $('.table-bordered.table-condensed tbidy').html($(data)); 
    $('#notification-bar').text('The page has been successfully loaded'); 
    }, 
    error: function() { 
    $('#notification-bar').text('An error occurred'); 
    } 
}); 

Answer 2

его не слишком большой проблемой. Вы должны просто дать некоторый класс и идентификаторы для вашей строки таблицы и tds. , прежде всего, дают уникальные идентификаторы для всех строк, в вашем случае у вас есть <?php echo $row['ID'];? и присваивать одинаковый класс всем строкам, которые будут использовать последующие шаги. и предоставить данные идентификатор для каждой строки с уникальным идентификатором ... так каждый тр можно назвать с <tr id='tr_<?php echo $row['ID'];?>' class='projects' data-id='<?php echo $row['ID'];?>'> and Predecessor td witl be <td id='p_<?php echo $row['ID'];?>'></td>

теперь я asssuming, что вы хотите обновить каждый проект Предшественник каждый 3 seconds..then только что вам нужно напишите ajax-вызов для обновления.

setInterval(function(){ 
$('.project').each(function(){ 
var id=$(this).data('id'); 
$.ajax({ 
    url:'php_file _name_that_takes_project_id_and_get_details_from_database', 
    data:{id:id}, 
    type:'POST', 
    sucess:function(data){ 
    // here data is returned value by ajax php file call which takes project id and fetch Predecessor related to this id. 
$('#p_'+id).html(data); 

    } 
    }); 
}); 
, 3000);