jquery-datatables下实现post请求数据无刷新动态更新 

下面是根据post请求本地服务器的完整源代码，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>msgshow</title>
<style type="text/css" title="currentStyle">
            @import "css/demo_page.css";
            @import "css/demo_table_jui.css";
            @import "css/jquery-ui-1.8.4.custom.css";
        </style>
        <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
                <script type="text/javascript" language="javascript" src="js/jquery.jeditable.js"></script>
        <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript">


function InitOverviewDataTable()
{
  oOverviewTable =$('#HelpdeskOverview').dataTable(
  {
    "bPaginate": true,
    "bJQueryUI": true,  
    "bLengthChange": false,
    "bProcessing": true,
    "bFilter": false,
    "bSort": false,
    "bInfo": true,
    "bAutoWidth": true,
    "iDisplayLength": 10,
    "sAjaxSource": 'http://192.168.1.160/XXXX/getinfo.php'
  });
}

function RefreshTable(tableId, urlData)
{
    var ss=new Array;
    var temp=new Array;
    $.post(urlData, '{"msgid":"3001","aid":"1002","count":"50"}',function(data)
    {
    table = $(tableId).dataTable();
    oSettings = table.fnSettings();
    table.fnClearTable(this);
       for(var j=0;j<data.values.length;j++)
       {
        var petname=data.values[j].petname;
        var did=data.values[j].did;
        var aid=data.values[j].aid;
        ss=[petname,did,aid];
        temp.push(ss);
        //table.fnAddData(ss);
        //var dt={"aaData":['petname':''+petname+'','did':''+did+'','aid':''+aid+'']};
        table.oApi._fnAddData(oSettings, ss);
       }
    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
    }, "json");
}

function AutoReload()
{
  RefreshTable('#HelpdeskOverview', 'http://192.168.1.160/lebeacon/getinfo.php');
  //setTimeout(function(){AutoReload();}, 2000);
}

$(document).ready(function () {
  InitOverviewDataTable();
  AutoReload();
  setInterval("AutoReload()",2000);
  //setTimeout(function(){AutoReload();}, 1000);
});
        
    </script>
</head>

<body id="dt_example">
        <div id="container">
            <div class="demo_jui">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="HelpdeskOverview">
    <thead>
        <tr>
            <th>User</th>
            <th>Drink</th>
            <th>District</th>
        </tr>
    </thead>
</table>
            </div>
        </div>
    </body>
</html>

 

posted @ 2014-10-14 09:32  elsonpeng  阅读(8860)  评论(0)  编辑  收藏  举报