21

So I have a table pulling information from a database and I was wondering how I could make it refresh its information without reloading the whole page.

M4N
  • 94,805
  • 45
  • 217
  • 260
Ben Cobbold
  • 231
  • 1
  • 2
  • 4
  • The answer is in the question : add a script reloading the table data using AJAX every 5 seconds. Google for the setTimeout JavaScript function. – JB Nizet Apr 15 '11 at 19:29
  • How do you have your backend setup? Are you planning on calling a script such as `getData.php?startID=1&endID=10` type of thing? – Justin808 Apr 15 '11 at 19:32

6 Answers6

39

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>
Wilt
  • 41,477
  • 12
  • 152
  • 203
Dutchie432
  • 28,798
  • 20
  • 92
  • 109
  • 1
    Thank you very much, even usable when using ASP (as it was my case) – ArcDare Feb 14 '12 at 11:06
  • 4
    Good reply. To help clarify, 1000 ms = 1 second. So: setTimeout(refreshTable, 5000); -- refreshes table every 5 seconds. – a coder Oct 19 '12 at 13:05
  • @Dutchie432 How do i set this up with a asp table? i don't use php. – Pomster Feb 06 '14 at 09:59
  • @Pomster the code is exactly the same, but instead of calling for `getTable.php` you just call `getTable.asp` or whatever your ASP page is called. You just need to have that ASP page create your table. – Dutchie432 Feb 06 '14 at 13:35
  • 4
    Worth mentioning (for noobs like me) that you need to import jQuery to your html file in the e.g. `` Wasted a good 10 minutes on this one! – Gmeister4 Apr 29 '15 at 14:18
  • Fair enough. The poster added a jQuery tag to the question, so I answered based on the assumption that it was already included. – Dutchie432 May 01 '15 at 16:05
8

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'.

Jeff Lambert
  • 24,395
  • 4
  • 69
  • 96
  • 2
    The "problem" with this solution is that it does not start the timer once the load is done. In other words, if your request takes more than 5 seconds to return, you will have overlapping ajax requests. I suggest using .abort() before initiating a new call. – Dutchie432 Feb 20 '13 at 10:22
  • @Dutchie correct. I have updated the answer to reflect a more robust solution. OP and others interested should read this answer: http://stackoverflow.com/a/446626/697370 for limitations on `abort` – Jeff Lambert Jul 20 '13 at 00:13
  • Alternatively, you can use my answer below, which starts the auto-timer once the ajax is finished. – Dutchie432 Jul 20 '13 at 10:30
6

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);
Etienne Dupuis
  • 13,548
  • 6
  • 47
  • 58
  • 1
    The "problem" with this solution is that it does not start the timer once the load is done. In other words, if your request takes more than 5 seconds to return, you will have overlapping ajax requests. I suggest using `.abort()` before initiating a new call. – Dutchie432 Feb 20 '13 at 10:19
2

Here is another option for you to use. This solution is using an IIFE which is preferred over setInterval. You can read more about IIFE at the link above.

JAVASCRIPT:

var $results = $('#results'),
    loadInterval = 5000;
(function loader() {
    $.get('script.php', function(html){
            $results.hide(200, function() {
                $results.empty();
                $results.html(html);
                $results.show(200, function() {
                    setTimeout(loader, loadInterval);
                });
            });
    });
})();

HTML:

<div id="results"></div>
  • Hi, but i dont actually know the function to refresh a table. – Ben Cobbold Apr 15 '11 at 19:28
  • @Etienne Dupuis I think gives a good example of how to get the data. –  Apr 15 '11 at 19:30
  • 1
    @Etienne Dupuis Sorry, I'm leaning towards watchers answer. I like the setInterval() verse setTimeout(); I didn't know about this method. –  Apr 15 '11 at 19:40
1

The following works with JQuery Datatables 1.10

`var tableName;
//Set AJAX Refresh interval.
$(function() {
    setReloadInterval(10);  //Refresh every 10 seconds. 
}

//Because function takes seconds we * 1000 to convert seconds to milliseconds.
function setReloadInterval(reloadTime) {
    if(reloadTime > 0)
        internalId = setInterval("reloadTable()", (reloadTime * 1000);
}

//Auto Refresh JQuery DataTable 
function reloadTable() {
    tableName.ajax.reload();
}

//Table defined...
$(document).ready(function () {
    tableName = $('#tableName').DataTable({
        "sAjaxSource": "/someUrl",
});`
wrgoff
  • 21
  • 3
1
setTimeout(function(){

      jqueryFunction(Args);

},100);

will work...

100 = 100 milliseconds

mu is too short
  • 426,620
  • 70
  • 833
  • 800
Eric Frick
  • 847
  • 1
  • 7
  • 18