Refresh a table with jQuery/Ajax every 5 seconds

Solution 1:

You'll need a getTable.php page that displays your table, and nothing else: no headers, footers, etc.

PHP (getTable.php) - this can be any server side code (asp, html, etc..)

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

Then, in your JS, you can easily 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, 5000);
        });
    }
</script>

Solution 2:

Use ajax, following example is in jQuery:

$(function() {
    var prevAjaxReturned = true;
    var xhr = null;

    setInterval(function() {
        if( prevAjaxReturned ) {
            prevAjaxReturned = false;
        } else if( xhr ) {
            xhr.abort( );
        }

        xhr = $.ajax({
            type: "GET",
            data: "v1="+v1+"&v2="+v2,
            url: "location/of/server/script.php",
            success: function(html) {
                 // html is a string of all output of the server script.
                $("#element").html(html);
                prevAjaxReturned = true;
           }

        });

    }, 5000);
});

The success function assumes that your server script outputs the html that you want to replace in the element with id 'element'.

Solution 3:

You should have a page that return the information and pull data using Ajax / jQuery.

<div class="result"></div>

setInterval(function() {

    $.get('table.php', function(data) {
      $('#result').html(data);
    });

}, 5000);