如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
Bootstrap Table實(shí)現(xiàn)定時(shí)刷新數(shù)據(jù)
推薦第二種方法
1、毀掉表格,再查詢數(shù)據(jù)后append,如果你查大量的數(shù)據(jù)(例如:查詢很多渠道的信息),而獲取服務(wù)器數(shù)據(jù)又太慢,你就會(huì)看到表格在一行一行的增加
-
定時(shí)器,多長(zhǎng)時(shí)間執(zhí)行一次,自己定義,此處是30S
setInterval(function() { queryAll();
}, 30000);
-
先定義一個(gè)函數(shù),里面放入查詢的方法updateRealTimeData和你所自定義使用的方法
function queryAll() { updateRealTimeData();
.
.
.
.
}
function updateRealTimeData() { if(errorFlag || appid == -1) return; $("#realTimeTable").bootstrapTable('removeAll'); $.ajax({
data: { .
.
.
.
.
},
type: "post", url: *******,
async: true, timeout:30000,
success: function(msg) { if(msg.code == '1') { showTableData(msg,……);
}
}
});
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
function showTableData(msg,……) { tableData = []; for(var i = 0; i < json.length; i++) {
tableData.push({ date: json[i].getDate,
.
.
.
.
}) tableData.reverse(); $("#realTimeTable").bootstrapTable('append', tableData);
}
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
2、使用updateRow方法
-
首先,得存在表格,里面有數(shù)據(jù),才能更新行,否則沒(méi)作用。此方法不會(huì)像上面的方法表格消失再增加,這個(gè)是整體不變,里面的數(shù)據(jù)會(huì)自動(dòng)更新
-
定時(shí)器,和上面一樣,多長(zhǎng)時(shí)間執(zhí)行一次,自己定義,此處是30S
setInterval(function() { queryAll(); for (var j = 0; j < 請(qǐng)求的數(shù)據(jù)的總條數(shù)(也就等于表格的行數(shù)); j++) {
changeAllChannelRealTime(j, .....);
} }, 30000);
function changeAllChannelRealTime(j, .....) {
$.ajax({
data: { .
.
.
.
.
},
type: "post", url: *******,
async: true, timeout:30000,
success: function(msg) { if (msg.code == '1') {
changeData(j, msg, .....);
}
},
error: function () { msgToast.error("查詢數(shù)據(jù)出錯(cuò)");
}
});
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
function changeData(i,msg,......){ $('#realTime_Table').bootstrapTable('updateRow', { index: i,
row: { date: msg.*
.
.
.
.
}
});
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
大象~ 大象~ 你的鼻子怎么那么長(zhǎng)~~
其他相關(guān):
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。