本文摘自PHP中文网,作者angryTom,侵删。

推荐使用第二种方法
推荐教程:Bootstrap入门教程
前提:令表格的id为realTimeTable
方法一:毁掉表格,再查询数据后append,如果你查大量的数据(例如:查询很多渠道的信息),而获取服务器数据又太慢,你就会看到表格在一行一行的增加
?定时器,多长时间执行一次,自己定义,此处是30S
1 2 3 | setInterval( function () {
queryAll();
}, 30000);
|
?先定义一个函数,里面放入查询的方法updateRealTimeData和你所自定义使用的方法
1 2 3 4 5 6 7 | function queryAll() {
updateRealTimeData();
.
.
.
.
}
|
?方法updateRealTimeData
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 | 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,……);
}
}
});
}
|
?方法showTableData
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function showTableData(msg,……) {
tableData = [];
for ( var i = 0; i < json.length; i++) {
tableData.push({
date: json[i].getDate,
.
.
.
.
})
tableData.reverse();
$( "#realTimeTable" ).bootstrapTable( 'append' , tableData);
}
}
|
方法二:使用updateRow方法
阅读剩余部分
相关阅读 >>
bootstrap的好处
如何解决bootstrap乱码问题
web 开发里程碑时刻:bootstrap 宣布放弃支持 ie
bootstrap模态窗中如何从远程加载内容?remote方法介绍
bootstrap模态框怎么关闭事件
学习bootstrap需要什么基础
html的table鼠标拖拽排序该如何实现
elementui和bootstrap区别
bootstrap可以用于移动端吗
rocketbootstrap是什么
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » Bootstrap Table实现定时刷新数据的方法