php 实时在线更新数据,动态生成表格
首先下载 JQ 和 vue.js,思路是定时器轮询后台,jq同步获得实时数据,再用vue数据绑定形式,实现实时更新数据,动态生成表格。html 部分<div class="topTable"><table class="table table-hover table-bordered table-list" id=&
·
首先下载 JQ 和 vue.js,思路是定时器轮询后台,jq同步获得实时数据,再用vue数据绑定形式,实现实时更新数据,动态生成表格。
html 部分
<div class="topTable"> <table class="table table-hover table-bordered table-list" id="example-1"> <thead> <tr> <th width="100">注册人数(人)</th> <th width="100">正在使用者人数(人)</th> <th width="100">本月新增人数(人)</th> <th width="100">本年新增人数(人)</th> </tr> </thead> <tr> <td>{{items[0]}}</td> <td>{{items[1]}}</td> <td>{{items[2]}}</td> <td>{{items[3]}}</td> </tr> </table> </div>
实例化一个vue
var vm = new Vue({ el: '#example-1', data: { items: [] } });
定时轮询 获得数据,在回调函数里面 用vue监控数据有没有变化,如果有变化就更新数据,操作DOM
setInterval(function () { $.ajax({ type:"post", async:false, url:URL, data:{ }, cache:false, dataType:"text", success:function (data) { var obj = JSON.parse(data); //console.log(obj); vm.items = obj; // 更改数据 vm.$el.textContent === obj;// false Vue.nextTick(function () { vm.$el.textContent === obj // true }); }) } }) },1000)
直接按顺序COPY 就能用了。如果数据有 多条,就循环输出,用vue的 v-for 循环输出数据 就可以了。
更多推荐
已为社区贡献1条内容
所有评论(0)