jquery-datatables下實現get請求數據無刷新動態更新

最近在做前端方面的工作，主要是用javascript跟本地后台get，post請求來將服務器傳過來的數據顯示在前台頁面上面，前台html/CSS

實現的效果是頁面表面上看起來是處於靜態的頁面（其實一直在響應后台的傳值），只是后台傳的數據有變化時，才會更新。

<table id="HelpdeskOverview">
  <thead>
    <tr>
      <th>Ärende</th>
      <th>Rapporterad</th>
      <th>Syst/Utr/Appl</th>
      <th>Prio</th>
      <th>Rubrik</th>
      <th>Status</th>
      <th>Ägare</th>
    </tr>
  </thead>
  <tbody> 
  </tbody> 
</table>

對應的get請求代碼如下：

function InitOverviewDataTable()
{
  oOverviewTable =$('#HelpdeskOverview').dataTable(  //注意名字與html中table id的一致性
  {
    "bPaginate": true,
    "bJQueryUI": true,  // ThemeRoller-stöd
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": true,
    "bAutoWidth": true,
    "bProcessing": true,
    "iDisplayLength": 10,
    "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
  });
}

function RefreshTable(tableId, urlData)
{
  $.getJSON(urlData, null, function( json )
  {
    table = $(tableId).dataTable();
    oSettings = table.fnSettings();
    
    table.fnClearTable(this);//動態刷新關鍵部分語句，只會根據后台數據有變化才會刷新 for (var i=0; i<json.aaData.length; i++)
    {
      table.oApi._fnAddData(oSettings, json.aaData[i]);//注意取得的jason串的字符數量，要與html中列的數量要有對應
    }

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
  });
}

function AutoReload()
{
  RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');
 
  setTimeout(function(){AutoReload();}, 30000);//設置刷新的頻率
}

$(document).ready(function () {
  InitOverviewDataTable();//第一次初始化jqueryDatatable,后面直接更新即可
  setTimeout(function(){AutoReload();}, 30000);
});