最近在做前端方面的工作,主要是用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); });