Làm mới một bảng với jQuery/Ajax cứ sau 5 giây

Question

Vì vậy, tôi có một bảng kéo thông tin từ một cơ sở dữ liệu và tôi đã tự hỏi làm thế nào tôi có thể làm cho nó làm mới thông tin của nó mà không cần tải lại toàn bộ trang.

Answer 1

Đây là một tùy chọn khác để bạn sử dụng. Giải pháp này đang sử dụng một số IIFE được ưu tiên hơn setInterval. Bạn có thể đọc thêm về IIFE tại liên kết ở trên.

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

Bạn nên có một trang mà trả lại thông tin và lấy dữ liệu sử dụng Ajax/jQuery.

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

setInterval(function() { 

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

}, 5000); 

Answer 3

setTimeout(function(){ 

     jqueryFunction(Args); 

},100); 

sẽ làm việc ...

100 = 100 mili giây

Answer 4

Bạn sẽ cần một trang getTable.php hiển thị bảng của bạn, và không có gì khác: không có tiêu đề, footers, vv

PHP (getTable.php) - đây có thể là bất kỳ mã phía máy chủ nào (asp, html, v.v ..)

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

Sau đó, trong JS, bạn có thể dễ dàng làm mới bảng bằng cách sử dụng load() phương pháp:

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

Sử dụng ajax , ví dụ sau là trong 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); 
}); 

Hàm thành công giả định rằng tập lệnh máy chủ của bạn xuất ra html mà bạn muốn thay thế trong phần tử có id 'element'.

Answer 6

Các công trình sau đây với 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", 
});`