Actualizar una tabla con jQuery/Ajax cada 5 segundos

Question

Así que tengo una tabla que extrae información de una base de datos y me preguntaba cómo podría actualizar su información sin tener que volver a cargar toda la página.

Answer 1

Aquí hay otra opción para que usted use. Esta solución está utilizando un IIFE que se prefiere sobre setInterval. Puede leer más sobre IIFE en el enlace de arriba.

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> 

Answer 2

Usted debe tener una página que devuelve la información y extraer datos usando AJAX/jQuery.

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

setInterval(function() { 

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

}, 5000); 

Answer 3

setTimeout(function(){ 

     jqueryFunction(Args); 

},100); 

va a funcionar ...

100 = 100 milisegundos

Answer 4

Tendrá una página getTable.php que muestra su mesa, y nada más: No hay encabezados, pies de página, etc.

PHP (getTable.php) - esto puede ser cualquier código del lado del servidor (ASP, hTML, etc ..)

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

Luego, en sus JS, puede actualizar fácilmente la tabla mediante la load() método:

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> 

Answer 5

Uso ajax , el siguiente ejemplo está en 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); 
}); 

La función de éxito asume que el script del servidor genera el html que desea reemplazar en el elemento con id 'element'.

Answer 6

las siguientes obras con 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", 
});`