需求描述：最近需要写一个界面，主要功能是实现模态框的动态刷新
问题：可是涉及到自动刷新就有问题了，因为每次获取数据都是全量数据，用dataTable组装表格的话，页面会一直一直闪！里面绘制的表格会不断出现异常
如图这个是我做好的动态刷新，下面的请求是每隔5秒刷新一次，解决问题的主要方法如下（最终解决方法是在datatables的API 中找到的）：
<!-- xplain:vs状态统计 配置 Author:[email protected] Time:2018/05/21 -->
<template id="interface-statistics-modal" >
<div class="modal fade" id="secondary-modal" data-toggle="modal" tabindex="-1" role="dialog" >
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<a class="pull-right help" >
<i class='fa fa-question-circle' ></i>
</a>
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
<table id="interface_statistics_table" class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>{{$t('slb.vs_name')}}</th>
<th>{{$t('slb.server_type')}}</th>
<th>{{$t('net.ip_address')}}</th>
<th>{{$t('net.status')}}</th>
<th>{{$t('slb.connect_number')}}</th>
<th>{{$t('slb.new_connect')}}</th>
<th>{{$t('slb.HTTP_request_rate')}}</th>
<th>{{$t('slb.request_flow')}}</th>
<th>{{$t('slb.response_flow')}}</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
import tableMixin from '../../../mixins'
import utils from '../../../utils.js'
export default{
mixins:[tableMixin],
props:['statusData'],
mounted:function(){
var self = this;
$(this.$el).modal({backdrop:'static'}).on('hidden.bs.modal',function(){
self.$parent.status = undefined
clearInterval(self.interval)
});
self.initTable()
self.statisticsTiming()
},
methods: {
prase:function(statisticsData){
let rx_pkts=''
statisticsData = statisticsData*8
if(statisticsData < 1000){
rx_pkts=statisticsData
}else if(statisticsData >= 1000 && statisticsData< 1000000){
rx_pkts=(statisticsData/1000).toFixed(2)+'K';
}else if(statisticsData >= 1000000 && statisticsData < 1000000000){
rx_pkts=(statisticsData/1000000).toFixed(2)+'M';
}else if(statisticsData >= 1000000000 && statisticsData < 1000000000000){
rx_pkts=(statisticsData/1000000000).toFixed(2)+'G';
}else if(statisticsData >= 1000000000000){
rx_pkts=(statisticsData/1000000000000).toFixed(2)+'T';
}
return rx_pkts
},
initTable:function() {
var self = this;
let viewdata = utils.deepCopy(self.statusData)
self.data = []
API.get(URI.vserver, function (resp){
if (resp.res.status == "success") {
self.slbvserver=resp.data
API.get(URI.pool, function (resp) {
if (resp.res.status == "success") {
self.slbpool=resp.data
for(let i=0;i<viewdata.length;i++) {
for (let j = 0; j < self.slbvserver.slb_vserver.length; j++) {
if (self.slbvserver.slb_vserver[j].uuid == viewdata[i].uuid) {
let res = self.slbvserver.slb_vserver[j]
let dataObj = {}
let ishttp = false
dataObj.name = res.name
dataObj.vip = res.vip
dataObj.alive_state = res.alive_state
dataObj.connections = res.slb_vserver_states.connections
dataObj.new_connections = res.slb_vserver_states.new_connections
if(res.protocol=='fast-http'||res.protocol=='smart-http'){
dataObj.requests = res.slb_vserver_states.requests ? res.slb_vserver_states.requests : 0
ishttp = true
}else{
dataObj.requests = 'n/a'
}
dataObj.flowin = self.prase(res.slb_vserver_states.flowin)
dataObj.flowout = self.prase(res.slb_vserver_states.flowout)
dataObj.type = 'vs'
self.data.push(dataObj)
for (let j = 0; j < self.slbpool.slb_pool.length; j++) {
if (self.slbpool.slb_pool[j].uuid == viewdata[i].slb_pool_uuid ||self.slbpool.slb_pool[j].uuid == viewdata[i].slb_backup_pool_uuid) {
let res = self.slbpool.slb_pool[j].slb_rserver
for (let p = 0; p < res.length; p++) {
let dataObj = {}
dataObj.name = ''
dataObj.vip = self.slbpool.slb_pool[j].name + '-' + res[p].address
dataObj.alive_state = res[p].state
dataObj.connections = res[p].slb_rserver_states.connections
dataObj.new_connections = res[p].slb_rserver_states.new_connections
if(ishttp){
dataObj.requests = res[p].slb_rserver_states.requests
}else{
dataObj.requests = 'n/a'
}
dataObj.flowin = self.prase(res[p].slb_rserver_states.flowin)
dataObj.flowout = self.prase(res[p].slb_rserver_states.flowout)
dataObj.type = 'rs'
self.data.push(dataObj)
}
}
}
}
}
}
setTimeout(function () {
if(self.table){
self.table.rows.add(self.data).draw()
}
if(!self.over){
self.viewdata()
}
},200)
}
})
}
})
},
viewdata:function(){
var self = this;
self.over = true
self.table = $("#interface_statistics_table").on('error.dt', function (e, settings, techNote, message) {
console.warn('An error has been reported by DataTables: ' + message);
}).DataTable({
info:false,
"autoWidth": true,
"scrollY": "600px",
"scrollCollapse": true,
"paging": false,
data: self.data,
lengthChange: false,
searching: false,
"order": [],
columns: [
{
"data": "name"
},
{
"data": "type",
"render": function (data, type, full, meta) {
return data == 'vs'?self.$root.$t('menu.vserver'):self.$root.$t('diag.real_server')
}
},
{
"data": "vip"
},
{
"data": "alive_state"
},
{
"data": "connections"
},{
"data": "new_connections"
},{
"data": "requests"
},{
"data": "flowin"
},{
"data": "flowout"
}],
columnDefs: [{
"searchable": false,
"orderable": false,
"targets": [0,1,2,3,4,5,6,7,8]
}]
})
},
statisticsTiming(){
let self = this
self.interval = setInterval(function(){
self.table.clear();
self.initTable()
},5000)
}
},
data:function(){
return {
'title':this.$t('slb.view_running_status'),
'data':undefined,
'slbvserver':undefined,
'slbpool':undefined,
'over':false
}
},
};
</script>主要方法是：我们再刷新的的时候，得到数据后先把databases的表格中的数据先清空，然后再把ＡＰＩ得到的数据再绘制。
清空数据使用：self.table.clear(); 文档ａｐｉ地址为http://www.datatables.club/reference/api/clear().html （不要使用clear().draw()，使用后会出现再清理数据后，页面会立刻把所有的值清楚，然后等到ｒｏｗｓ．ａｄｄ（）才会绘至表格）
得到组装好的数据后再绘制表格：self.table.rows.add( 数组 ).draw() 文档ａｐｉ地址为https://datatables.net/reference/api/rows.add()
版权声明：本文为博主原创文章，未经博主允许不得转载。https://mp.csdn.net/postedit/80784213