Render table values dynamically using Ajax after page load in php

Question

My idea is to get connectivity status of available servers in database on a php page.

  <tbody>
  <?php foreach ($data['servers'] as $server) { ?>
     <tr>
          <td class=""><?php echo $server->server_name; ?></td>
          <td class=""><?php echo $server->base_path; ?></td>
          <td class="server_status"><?php if (is_dir($server->base_path)){ echo 'Pass';} else { echo 'Fail' } ?></td>
    </tr>
  <?php  } ?>
  </tbody>

I want to do this just after page load using ajax like this page screenshot

How do I call ajax to get each value of this dynamically generated table. So far, I have tried the following code

<?php foreach ($data['servers'] as $server) { ?>
     <tr>
          <td class=""><?php echo $server->server_name; ?></td>
          <td class=""><?php echo $server->base_path; ?></td>
          <td class="server_status"></td>
          <td class="server_status_loading"></td>
    </tr>
  <?php  } ?>

JS

$(function(){

$(".server_status").hide();
$(".server_status_loading").show();
$.ajax({
    url: 'get-server-status'
})
.error(function(){
    alert('Error!');
})
.done(function(response){

    $(".server_status_loading").hide();
    $(".server_status").show();
    $(".server_status").html(response);
});

get-server-status function:

    public function getStatus() {

    $basep = $this->_serverModel->getBasePath(2);
    if (is_dir($basep)) { 
        echo 'Pass'; exit;
    } 
    else { 
        echo 'Fail'; exit;
    }
}

Thanks in advance!

Answer 1

try like this

$(document).ready(function(){
    var hTable = document.getElementById('table2');
        var iRowCount = hTable.rows.length;

    for(var i=1; i<iRowCount; i++){
        basepath= hTable.rows[i].cells[2].childNodes[1].value;      
        $.ajax({
           url: 'get-server-status',
           data :basepath 
        })
    .error(function(){
        alert('Error!');
    })
    .done(function(response){
        hTable.rows[i].cells[2].childNodes[3].value=response;
    });

    }
}

Answer 2

first add id to your <tr> .

<?php foreach ($data['servers'] as $server) { ?>
 <tr id="echo database id here.">
      <td class=""><?php echo $server->server_name; ?></td>
      <td class=""><?php echo $server->base_path; ?></td>
      <td class="server_status"></td>
      <td class="server_status_loading"></td>
</tr>

then check this link to handle the ajax on page load and this link to handle the ajax on click.Rest everything is provided there.

In link you can replace status to server_status_loading