Refresh only the values of a table with jQuery/Ajax without reloading the page-CodePudding

I have been following various jQuery/Ajax threads on stackoverflow for refreshing tables without loading the entire page, however, it seems that this does not prevent the table from reloading itself. Is there any way to refresh only the table values, but keep the table from redrawing?

Resources I have been looking at-

How to refresh table contents in div using jquery/ajax

Redraw datatables after using ajax to refresh the table content?

More or less, I have a getTable.php page that displays my table, and nothing else: no headers, footers, etc.

PHP (getTable.php) - this is server side code (asp, html, etc..)

<?php
    echo '<table><tr><td>TEST</td></tr></table>';
?>

Then, in my JS, I refresh the table by using the load() method:

HTML

<div id="tableHolder"></div>

<script type="text/javascript">
    $(document).ready(function(){
      refreshTable();
    });

    function refreshTable(){
        $('#tableHolder').load('getTable.php', function(){
           setTimeout(refreshTable, 10000);
        });
    }
</script>

Every 10 seconds the entire table reloads. I understand it is because of the load, but how do I only update the values?

CodePudding user response：

Consider the following example.

$(function() {
  function makeTable(data, target) {
    var table = $("<table>");
    $("<thead>").appendTo(table);
    $("<tbody>").appendTo(table);
    // Build Header
    var headers = Object.keys(data[0]);
    $("<tr>").appendTo($("thead", table));
    $.each(headers, function(i, v) {
      $("<th>").html(v).appendTo($("thead > tr", table));
    });
    // Build Body
    $.each(data, function(i, r) {
      var row = $("<tr>").appendTo($("tbody", table));
      $.each(r, function(j, c) {
        $("<td>").html(c).appendTo(row);
      });
    });
    if (target == undefined) {
      return table;
    } else {
      table.appendTo(target);
    }
  }

  function updateTable(target, rows) {
    var body = $("tbody", target);
    var row;
    body.empty();
    $.each(rows, function(i, r) {
      row = $("<tr>").appendTo(body);
      $.each(r, function(j, c) {
        $("<td>").html(c).appendTo(row);
      });
    });
  }

  var myTableData = [{
    "fruit": "apple",
    "price": 1.50,
    "quantity": 3
  }, {
    "fruit": "banana",
    "price": 0.75,
    "quantity": 20
  }, {
    "fruit": "dragonfruit",
    "price": 3,
    "quantity": 1
  }];

  var newTableData = [{
    "fruit": "apple",
    "price": 1.50,
    "quantity": 2
  }, {
    "fruit": "banana",
    "price": 0.95,
    "quantity": 20
  }, {
    "fruit": "grapes",
    "price": 2.40,
    "quantity": 12
  }]

  makeTable(myTableData, "#tableHolder");

  var timer = setInterval(function() {
    updateTable("#tableHolder", newTableData)
  }, 10 * 1000);
});

#tableHolder table {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableHolder"></div>

This uses one function to build the table based on JSON Data. It extracts the headers and builds the rows from data provided. So you will want to update your PHP Code to act more like an API and upon the request it can provide the JSON data instead of the HTML Data.

The second function is very similar except it just erases the rows and re-writes them.

I can then use setInterval to run this every 10 seconds.

See More: https://www.w3schools.com/jsref/met_win_setinterval.asp