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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM