刷新數據表時出錯 - 無法重新初始化DataTable

Question

我有一個包含2個數組的多個對象的json數據，我將以下代碼放在一起，使我只能進行一次調用並將結果拆分爲2個表。我現在面臨的問題是我無法再刷新表格了。我已嘗試不同的選項，但得到無法重新初始化DataTable這是有道理的，所以我想我現在卡住了。

代碼：

$(document).ready(function(){ 
    setInterval (function(){ 
     $.getJSON("ajax/json.txt", function (pcheckdata){ 

     <!-- ------------------- Extract Only Alerts ---------------------- --> 
      $('#alert-table').dataTable({ 
       "bJQueryUI": true, 
       "data": pcheckdata.alerts, 
       "columns": [ 
        { "mData": "host" }, 
        { "mData": "description" } 
       ], 
      }); 

     <!-- ------------------- Extract Only Errors ---------------------- --> 
      $('#error-table').dataTable({ 
       "bJQueryUI": true, 
       "data": pcheckdata.errors, 
       "columns": [ 
        { data: 'host' }, 
        { data: 'description' } 
       ], 
      }); 
     }); 
    }, 1000); 
}); 

我的JSON結構

{ 
    "alerts": [ 
     { 
      "host": "server1", 
      "description": "Engine Alive" 
     }, 
     { 
      "host": "ftpserver", 
      "description": "Low free disk space" 
     } 
    ], 

    "errors": [ 
     { 
      "host": "server3", 
      "description": "Can't connect to MySQL server" 
     }, 
     { 
      "host": "server4", 
      "description": "SSQL timeout expired" 
     } 
    ] 
} 

HTML位：

<table id="alert-table" class="display" cellspacing="0"> 
    <thead class="t-headers"> 
     <tr> 
      <th>HOST</th> 
      <th>DESCRIPTION</th> 
     </tr> 
    </thead> 
</table> 

<table id="error-table" class="display" cellspacing="0"> 
    <thead class="t-headers"> 
     <tr> 
      <th>HOST</th> 
      <th>ERROR DESCRIPTION</th> 
     </tr> 
    </thead> 
</table> 

我很想知道是否有刷新在2代表的方式同一時間，因爲數據只會被提取一次，或者更好地使用純粹的JQUERY，並忘記數據表，因爲它eems讓我頭痛

Answer 1

爲什麼你想重新整個表，只需創建表一次，並在ajax回調，清除表和添加數據。你使用的是哪個版本的數據表？我用舊的函數來清除和添加數據，新表格它會有所不同，但你知道這個想法。

下面是一個例子：

$(document).ready(function(){ 

    //Init datatables without data 

      <!-- ------------------- Extract Only Alerts ---------------------- --> 
      var alertTable = $('#alert-table').dataTable({ 
       "bJQueryUI": true, 

       "columns": [ 
        { "mData": "host" }, 
        { "mData": "description" } 
       ], 
      }); 

     <!-- ------------------- Extract Only Errors ---------------------- --> 
      var errorTable = $('#error-table').dataTable({ 
       "bJQueryUI": true, 

       "columns": [ 
        { data: 'host' }, 
        { data: 'description' } 
       ], 
      }); 

    setInterval (function(){ 
     $.getJSON("ajax/json.txt", function (pcheckdata){ 

     alertTable.fnClearTable(); //New API then alertTable.clear().draw(); 
     alertTable.fnAddData(pcheckdata.alerts); //New API then alertTable.row.add(pcheckdata.alerts); 
     alertTable.fnAdjustColumnSizing(); //New API then alertTable.columns.adjust().draw(); 

     errorTable.fnClearTable(); //New API then errorTable.clear().draw(); 
     errorTable.fnAddData(pcheckdata.errors); //New API then errorTable.row.add(pcheckdata.errors); 
     errorTable.fnAdjustColumnSizing();////New API then errorTable.columns.adjust().draw() 

     }); 
    }, 1000); 
}); 

另一種方法是檢查，如果數據表已經被初始化。

$(document).ready(function(){ 
    setInterval (function(){ 
     $.getJSON("ajax/json.txt", function (pcheckdata){ 
     //Is datatable already init. 
     if (! $.fn.DataTable.isDataTable('#alert-table')) { 

     <!-- ------------------- Extract Only Alerts ---------------------- --> 
      $('#alert-table').dataTable({ 
       "bJQueryUI": true, 
       "data": pcheckdata.alerts, 
       "columns": [ 
        { "mData": "host" }, 
        { "mData": "description" } 
       ], 
      }); 
     }else 
     { 
      $('#alert-table').dataTable().clear().draw(); 
      $('#alert-table').dataTable().row.add(pcheckdata.alerts); 
      $('#alert-table').dataTable().columns.adjust().draw(); 
     } 
     if (! $.fn.DataTable.isDataTable('#error-table')) { 
     <!-- ------------------- Extract Only Errors ---------------------- --> 
      $('#error-table').dataTable({ 
       "bJQueryUI": true, 
       "data": pcheckdata.errors, 
       "columns": [ 
        { data: 'host' }, 
        { data: 'description' } 
       ], 
      }); 
     }else 
     { 
      $('#error-table').dataTable().clear().draw(); 
      $('#error-table').dataTable().row.add(pcheckdata.errors); 
      $('#error-table').dataTable().columns.adjust().draw(); 
     } 

     }); 
    }, 1000); 
});