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

Question

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>

JS

<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?

You will want to gather just the values from your PHP instead of the whole HTML. This way you can load the Table Body instead of the whole Table. For example, just get JSON back from PHP and then make a function to clear and redraw the table contents in jQuery. — Twisty
– Twisty, Commented Sep 27, 2021 at 14:57
You'll have to return data (rows, values) instead of HTML markup. A JSON data structure is a good option. Couple that with a loop on your JS, a couple of selectors and you're in business. I think you need to investigate/learn a little bit further. — nitrin0
– nitrin0, Commented Sep 27, 2021 at 14:57
You can also leverage DataTables which addresses precisely this use case. — Daniel
– Daniel, Commented Sep 27, 2021 at 15:00
Amazing guys! Thank you for all your responses. I am going to try again. — portfoliobuilder
– portfoliobuilder, Commented Sep 27, 2021 at 15:07
@Twisty Can you or others provide what you have said as the answer? I will accept it. Helps a lot. — portfoliobuilder
– portfoliobuilder, Commented Sep 27, 2021 at 15:24

Twisty · Accepted Answer · 2021-09-27 16:18:43Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related