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);
});