5초마다 jQuery/Ajax로 테이블 새로 고침

5초마다 jQuery/Ajax로 테이블 새로 고침

그래서 저는 데이터베이스에서 정보를 가져오는 테이블이 있는데 어떻게 하면 전체 페이지를 다시 로드하지 않고 정보를 새로 고칠 수 있는지 궁금합니다.

당신은 필요할 것입니다.getTable.php표와 머리글, 바닥글 등을 표시하지 않는 페이지입니다.

PHP(getTable.php) - 임의의 서버 사이드 코드(asp, html 등)일 수 있습니다.

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

그런 다음 JS에서 테이블을 쉽게 새로 고칠 수 있습니다.load()방법:

HTML

<div id="tableHolder"></div>

제이에스

<script type="text/javascript">
    $(document).ready(function(){
      refreshTable();
    });

    function refreshTable(){
        $('#tableHolder').load('getTable.php', function(){
           setTimeout(refreshTable, 5000);
        });
    }
</script>

jQuery에서 다음 예를 참조하여 ajQuery에서는 다음과 같이 설명합니다.

$(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);
});

성공 함수는 서버 스크립트가 ID가 'element'인 요소에서 바꾸려는 html을 출력한다고 가정합니다.

Ajax / jQuery를 사용하여 정보를 반환하고 데이터를 가져오는 페이지가 있어야 합니다.

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

setInterval(function() {

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

}, 5000);

다음은 사용할 수 있는 다른 옵션입니다.이 솔루션은 setInterval보다 선호되는 IIF를 사용하고 있습니다.위의 링크에서 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>

setTimeout(function(){

      jqueryFunction(Args);

},100);

효과가 있을 것입니다...

100 = 100밀리초

다음은 JQuery Data Table 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",
});`

언급URL : https://stackoverflow.com/questions/5681380/refresh-a-table-with-jquery-ajax-every-5-seconds