JQuery Datatable不會間隔重新加載

Question

我有一個jQuery數據表正在使用並試圖通過間隔重新加載數據。我不能成功，但是這個代碼是正確的嗎？

(document).ready(function() { 
    $.ajax({ 
     url: "./includes/processing.php", 
     method: "POST", 
     dataType:'json', 
     "contentType": "application/json; charset=utf-8", 
     success: function(data) { 
      $('#DTResTableList_1').dataTable({ 
       data: data, 
       'paging': false, 
       'scrollY': 400, 
       'select': true, 
       columns:[ 
        {'data' : 'col0'}, 
        {'data' : 'col1'}, 
        {'data' : 'col2'}, 
        {'data' : 'col3'}, 
        {'data' : 'col4'}, 
        {'data' : 'col5'} 
       ] 
      }); 
     }, 
     error: function(data) { 
      console.log(data); 
     } 
    }); 
    setInterval(function() { 
     table.ajax.reload(); 
}, 1000); 
}); 

試圖單獨構建它，但這不會讓內容自動加載。

使用此代碼解決;

$(document).ready(function() { 
    $('#DTResTableList_1').DataTable({ 
     "ajax": { 
      url: './includes/processing.php', 
      method: 'POST', 
      dataType:'json', 
      contentType: 'application/json; charset=utf-8', 
      dataSrc: ""}, 
      paging:  false, 
      scrollY: 400, 
      select:  true, 
     'columns': [ 
      {'data' : 'col0'}, 
      {'data' : 'col1'}, 
      {'data' : 'col2'}, 
      {'data' : 'col3'}, 
      {'data' : 'col4'}, 
      {'data' : 'col5'} 
     ] 
    }); 
    setInterval(function() { 
    $('#DTResTableList_1').DataTable().ajax.reload(null, false); // user paging is not reset on reload 
}, 5000); 
}); 

Answer 1

請改用下面的代碼。

我建議在成功DataTables初始化後立即調用setInterval否則會出現競速狀況。

$(document).ready(function() { 
    var table = $('#DTResTableList_1').DataTable({    
     'ajax': { 
      'url': "./includes/processing.php", 
      'method': "POST", 
      'dataType': 'json', 
      'contentType': "application/json; charset=utf-8" 
     }, 
     'initComplete': function(settings){ 
      var api = new $.fn.dataTable.Api(settings); 

      setInterval(function() { 
       api.ajax.reload(); 
      }, 1000); 
     }, 
     'paging': false, 
     'scrollY': 400, 
     'select': true, 
     'columns': [ 
      {'data' : 'col0'}, 
      {'data' : 'col1'}, 
      {'data' : 'col2'}, 
      {'data' : 'col3'}, 
      {'data' : 'col4'}, 
      {'data' : 'col5'} 
     ] 
    }); 
});