刷新数据表时出错 - 无法重新初始化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); 
});