前端頁面使用DataTables無刷新更新數據

前言

不用整體刷新頁面，可以定時更新后台數據的變化，本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;
	}

頁面效果

參考資料：

Datatables中文網