web-dev-qa-db-fra.com

Actualiser une table avec jQuery / Ajax toutes les 5 secondes

J'ai donc une table qui extrait des informations d'une base de données et je me demandais comment je pouvais l'actualiser sans recharger la page entière.

phpjqueryajax
21
Ben Cobbold

Vous aurez besoin d'une page getTable.php Qui affiche votre tableau, et rien d'autre: aucun en-tête, pied de page, etc.

PHP (getTable.php) - cela peut être n'importe quel code côté serveur (asp, html, etc.)

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

Ensuite, dans votre JS, vous pouvez facilement actualiser la table en utilisant la méthode load():

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>
37
Dutchie432

Utilisez ajax, l'exemple suivant est dans 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 fonction de succès suppose que votre script de serveur génère le code HTML que vous souhaitez remplacer dans l'élément par l'ID 'élément'.

9
Jeff Lambert

Vous devriez avoir une page qui renvoie les informations et extrait les données à l'aide d'Ajax/jQuery.

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

setInterval(function() {

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

}, 5000);
6
Etienne Dupuis

Voici une autre option à utiliser. Cette solution utilise un IIFE qui est préféré à setInterval. Vous pouvez en savoir plus sur l'IIFE sur le lien ci-dessus.

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>
2
Kyle Rogers
setTimeout(function(){

      jqueryFunction(Args);

},100);

marchera...

100 = 100 millisecondes

1
Eric Frick

Les éléments suivants fonctionnent avec 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",
});`
1
wrgoff