前端页面使用DataTables无刷新更新数据

前言

不用整体刷新页面，可以定时更新后台数据的变化，本Demo使用了DataTables表格插件
请按照官方文档直接引入相关SDK。。。。 废话不多说了，直接上代码

相关代码

• 前端的DIV Box

<div class="row" >
    <table  id="datatables" class="display compact" style="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="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;
	}

页面效果

参考资料：

Datatables中文网