超時時jQuery AJAX調用函數

Question

我試圖重新加載我的jQuery DataTables而不刷新頁面以試圖捕獲新數據。

這是我的初始准備函數，它開始了這個過程：

 $(document).ready(function()
 {
   $.ajax({
     url:'api/qnams_all.php',
     type:"GET",
     dataType:"json"
   }).done(function(response) {
       console.log(response.data);
       renderDataTable(response.data)
   }).fail(function() {
       alert( "error" );
   }).always(function() {
       alert( "complete" );
   });  
 });

我正在將數據發送到此函數：

 function renderDataTable(data)
 {
   var $dataTable = $('#example1').DataTable({
     "data": data,
     "iDisplayLength": 25,
     "order": [[ 6, "desc" ]],
     "bDestroy": true,
     "stateSave": true
     // there's some more stuff, but I don't think necessary to show
   });
 }

我正在嘗試利用這里找到的答案： 如何使用jquery / ajax刷新div中的表內容

如下：

 setTimeout(function(){
   $( "#example1" ).load( "mywebpage.php #example1" );
 }, 2000);

使用上述所有代碼，當頁面首次加載時，它看起來像這樣：

但刷新后，它看起來像這樣：

上面的圖片確實在沒有頁面刷新的情況下重新加載，但我不確定為什么它看起來像上面的圖片。

Answer 1

我認為這個例子很有用

//Reload the table data every 30 seconds (paging reset)
var table = $('#example').DataTable( {
    ajax: "data.json"
} );

setInterval( function () {
    table.ajax.reload();
}, 30000 );

更多細節 - 這里

Answer 2

創建一個加載/渲染數據的函數，然后在文檔就緒並在2秒后調用它：

function loadAndRender()
{
    $.ajax(
    {
        url:'api/qnams_all.php',
        type:"GET",
        dataType:"json"
    }).done(function(response)
    {
        console.log(response.data);
        renderDataTable(response.data)
    }).fail(function()
    {
        alert( "error" );
    }).always(function()
    {
        alert( "complete" );
    });  

}

function renderDataTable(data)
{
    var $dataTable = $('#example1').DataTable(
    {
        "data": data,
        "iDisplayLength": 25,
        "order": [[ 6, "desc" ]],
        "bDestroy": true,
        "stateSave": true
        // there's some more stuff, but I don't think necessary to show
    });
}

$(document).ready(loadAndRender);

setTimeout(loadAndRender, 2000);