Подтвердить что ты не робот

Обновите таблицу с помощью jQuery/Ajax каждые 5 секунд.

Итак, у меня есть таблица, извлекающая информацию из базы данных, и мне было интересно, как я могу обновить ее информацию без перезагрузки всей страницы.

4b9b3361

Ответ 1

Вам понадобится страница getTable.php, отображающая вашу таблицу, и ничего больше: никаких заголовков, нижних колонтитулов и т.д.

PHP (getTable.php) - это может быть любой код на стороне сервера (asp, html и т.д.)

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

Затем в вашем JS вы можете легко обновить таблицу с помощью метода 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>

Ответ 2

Используйте ajax, следующий пример находится в 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);
});

Функция успеха предполагает, что ваш сервер script выводит html, который вы хотите заменить в элементе с id 'element'.

Ответ 3

У вас должна быть страница, которая возвращает информацию и извлекает данные с помощью Ajax/jQuery.

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

setInterval(function() {

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

}, 5000);

Ответ 4

Вот вам еще один вариант. Это решение использует IIFE, который предпочтительнее, чем setInterval. Вы можете узнать больше о IIFE по ссылке выше.

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>

Ответ 5

setTimeout(function(){

      jqueryFunction(Args);

},100);

будет работать...

100 = 100 миллисекунд

Ответ 6

Следующие работы с 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",
});`