Ajax : load html from php file

Cyri1

Hello, i have a xhr-term.php file generate html <tr> like this :

echo '<tr>
<td>' . $value['ip'] . '</td>
<td>' . $value['nom'] . '</td>
<td>' . $value['site'] . '</td>';

if ($value['status'] == 'up')
{
   echo '<td><span style="font-size: 1em; color: green;"><i class="far fa-arrow-alt-circle-up"></i></span></td>';
}

if ($value['muted'] == '1')
{
   echo '<td><span style="font-size: 1em; color: red;"><i class="fas fa-microphone-alt-slash"></i></span></td>';
}
else{
   echo '<td><span style="font-size: 1em; color: green;"><i class="fas fa-microphone-alt"></i></span></td>';
}

if ($value['battery'] == 'BATTERY_GOOD')
{
   echo '<td><span style="font-size: 1em; color: green;"><i class="fas fa-battery-full"></i></span></td>';
}
else{
   echo '<td><span style="font-size: 1em; color: red;"><i class="fas fa-battery-quarter"></i></span></td>';
}

echo '
<td>' . $value['state'] . '</td>
<td>' . secondsToTime($value['uptime']) . '</td>
</tr>';

i would like to use this as data source. I tried this :

  function xhrterm(callback) {
    $.ajax({
      url: 'ajax/xhr-term.php',
      success: function(callback) {
      $('#table-visio').DataTable({});
      $('#table-visio tbody').append(callback);
      }
    })
  };
  xhrterm();

It works but only for the first ajax call (idea is to do a SetInterval to update data every xx seconds) after i have a message telling me i cant reinit datatable.
I tried aswell to put $('#table-visio').DataTable({}); outside function but it doesnt work.

Iv read documentation about Ajax Datatable but i didnt find something usefull for me (or i don't understand how to make it works)

Can you please tell me the right way to update my datatable with my xhr-term.php ?
Thanks in advance.

colin

I tried aswell to put $('#table-visio').DataTable({}); outside function but it doesnt work.

Why doesn't it work? Are you seeing errors, perhaps about re-initialising the table? If so, add destroy to the DataTables initialisation.

Colin

Cyri1

With $('#table-visio').DataTable({}); outside function:
No error. But iv 1 row where its write "No data" and under this row all my rows. And if i click on <TH> to order my datas all my rows disappear.

colin

That's hard to say without seeing it. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin