如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Bootstrap Table實現定時刷新數據
推薦第二種方法
1、毀掉表格，再查詢數據后append，如果你查大量的數據（例如：查詢很多渠道的信息），而獲取服務器數據又太慢，你就會看到表格在一行一行的增加
setInterval(function() { queryAll();
}, 30000);
-
先定義一個函數，里面放入查詢的方法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方法
-
首先，得存在表格，里面有數據，才能更新行，否則沒作用。此方法不會像上面的方法表格消失再增加，這個是整體不變，里面的數據會自動更新
-
定時器，和上面一樣，多長時間執行一次，自己定義，此處是30S
setInterval(function() { queryAll(); for (var j = 0; j < 請求的數據的總條數（也就等于表格的行數）; 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("查詢數據出錯");
}
});
}
-
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
大象~ 大象~ 你的鼻子怎么那么長~~
其他相關：
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
