前言
不用整体刷新页面,可以定时更新后台数据的变化,本Demo使用了DataTables表格插件
请按照官方文档直接引入相关SDK。。。。 废话不多说了,直接上代码
步骤/相关代码
前端的DIV Box
<div class="row" >
<table id="datatables" class="display compact" style="width:90%"></table>
</div>
JS引入渲染
$(document).ready(function () {
initTableConfig();
autoLoadDataTable();
//定时任务
setInterval(function () {
autoLoadDataTable();
},10000)
})
function autoLoadDataTable(){
//如果有不同的table需要刷新,直接添加不同的URL数据源和不同的ID标签就可以了
RefreshTable('#datatables', base_url + '/risk/getDatas');
}
//配置DataTables,只是配置,渲染在定时任务的方法里面
function initTableConfig(){
$('#datatables').DataTable({
"paging": false,
"ordering": false,
"info": false,
//搜索和排序相关参数
"searching":false,
"ordering":false,
columns: [
{data: 'id' , title:'ID' },
{ data: 'ip' , title:'是否正常', "visible": false},
{
data: 'port' ,
title:'服务地址',
render: function (data,type,row) {
// console.log('data'+data+'type'+type+'row'+row+'rowid'+row.id);
var ip = row.ip;
var port = row.port;
return '<td> '+ip+':'+port+'</td>';
}
},
{ data: 'isLined' , title:'是否正常'},
{ data: 'online' , title:'是否在线'},
{ data: 'iafStatus' , title:'IAF状态'},
{
// data: 'iafStatus',
title:'操作',
render: function (data,type,row) {
var ip = row.ip;
var port = row.port;
return '<td> <button class="btn btn-danger btn-xs" onclick ="online(this)" style="width:80%" ip = "'+row.ip+'" port = "'+row.port+'">上线</button></td>';
}
}
],
});
}
//刷新数据,方法无须更改可以直接复用
function RefreshTable(tableId, urlData){
$.getJSON(urlData, null, function( json )
{
table = $(tableId).dataTable();
oSettings = table.fnSettings();
table.fnClearTable(this);//动态刷新关键部分语句,只会根据后台数据有变化才会刷新
for (var i=0; i<json.length; i++)
{
table.oApi._fnAddData(oSettings, json[i]);//注意取得的jason串的字符数量,要与html中列的数量要有对应
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
table.fnDraw();
});
}
Java提供后端服务,相关测试方法
//controller层一个方法(Spring框架)
@RequestMapping("getDatas")
@ResponseBody
public List<SvcMonitor> getDatas(){
List<SvcMonitor> svcMonitorList= new ArrayList<>();
Random random = new Random();
for(int i = 1; i<=10; i++){
SvcMonitor svcMonitor = new SvcMonitor();
int rndNum = random.nextInt(1000);
svcMonitor.setId(rndNum+"");
svcMonitor.setIp("192.68.1."+rndNum);
svcMonitor.setPort(rndNum+1000+"");
svcMonitor.setIsLined("正常");
svcMonitor.setOnline("在线");
svcMonitor.setIafStatus(rndNum-1+"");
svcMonitorList.add(svcMonitor);
}
return svcMonitorList;
}
页面效果
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzMyMzEzLzIwMjAwMi83MzIzMTMtMjAyMDAyMjkyMjIxNTcwMzAtMTYxOTYyMDk3NC5wbmc?x-oss-process=image/format,png&x-oss-process=image/resize,w_1400/format,webp)
参考资料:
Datatables中文网