下面是根據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>