Bootstrap Table实现定时刷新数据的方法


Posted in Javascript onAugust 13, 2018

推荐第二种方法

•令表格的id为realTimeTable

1、毁掉表格,再查询数据后append,如果你查大量的数据(例如:查询很多渠道的信息),而获取服务器数据又太慢,你就会看到表格在一行一行的增加

•定时器,多长时间执行一次,自己定义,此处是30S

setInterval(function() {
    queryAll();
}, 30000);

•先定义一个函数,里面放入查询的方法updateRealTimeData和你所自定义使用的方法

function queryAll() {
  updateRealTimeData();
    .
    .
    .
    .
}

•方法updateRealTimeData

function updateRealTimeData() {
  if(errorFlag || appid == -1) return;
  //把表格的tbody移除,不然后面会一直添加
  $("#realTimeTable").bootstrapTable('removeAll');
  //获取数据
  $.ajax({
      data: {
      //向服务器发送的一些参数,像日期,游戏ID什么的
            .
            .
            .
            .
            .
        },
          type: "post",
          //url不用说了吧,否则不知道向服务器哪个接口发送并请求
          url: *******,
          async: true,
          //超时时间
          timeout:30000,
          success: function(msg) {
            if(msg.code == '1') {
              //定义的函数实现对表格赋值,自定义想传的参数,但别忘了msg,不然搞个屁
              showTableData(msg,……);
            }
          }
        });
      }

•方法showTableData

function showTableData(msg,……) {
     tableData = [];
     for(var i = 0; i < json.length; i++) {
        tableData.push({
          //这里也就是data-field的名称,getDate是服务器返回的字段名
          date: json[i].getDate,
            .
            .
            .
            .
        })
        //数组反向排列,看情况使用
        tableData.reverse();
        //向tbody里面添加数据
        $("#realTimeTable").bootstrapTable('append', tableData);
      }
}

2、使用updateRow方法

•首先,得存在表格,里面有数据,才能更新行,否则没作用。此方法不会像上面的方法表格消失再增加,这个是整体不变,里面的数据会自动更新

•定时器,和上面一样,多长时间执行一次,自己定义,此处是30S

setInterval(function() {
    queryAll();
    for (var j = 0; j < 请求的数据的总条数(也就等于表格的行数); j++) {
        changeAllChannelRealTime(j, .....);
      }
}, 30000);

function changeAllChannelRealTime(j, .....) {
    $.ajax({
      data: {
      //向服务器发送的一些参数,像日期,游戏ID什么的
            .
            .
            .
            .
            .
        },
          type: "post",
          //url不用说了吧,否则不知道向服务器哪个接口发送并请求
          url: *******,
          async: true,
          //超时时间
          timeout:30000,
          success: function(msg) {
            if (msg.code == '1') {
              changeData(j, msg, .....);
          }
        },
        error: function () {
          msgToast.error("查询数据出错");
        }
      });
    }

function changeData(i,msg,......){
    $('#realTime_Table').bootstrapTable('updateRow', {
      //i表示第几行,从0开始
        index: i,
        row: {
          //这里也就是data-field的名称,*表示字段名
          date: msg.*
            .
            .
            .
            .
        }
      });     
}

总结

以上所述是小编给大家介绍的Bootstrap Table实现定时刷新数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
cookie的secure属性详解
Apr 08 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
vue实现循环切换动画
Oct 17 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
angular2实现统一的http请求头方法
Aug 13 #Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 #Javascript
vue后台管理之动态加载路由的方法
Aug 13 #Javascript
jQuery中$原理实例分析
Aug 13 #jQuery
Angular服务Request异步请求的实例讲解
Aug 13 #Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 #Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 #jQuery
You might like
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python查询IP地址归属完整代码
2017/06/21 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python绘制简单彩虹图
2018/11/19 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Python 学习教程之networkx
2019/04/15 Python
python实现弹跳小球
2019/05/13 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
python里反向传播算法详解
2020/11/22 Python
在购买印度民族服饰:Soch
2020/09/15 全球购物
九州传奇上机题
2014/07/10 面试题
《晚上的太阳》教学反思
2014/04/23 职场文书
学雷锋月活动总结
2014/04/25 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
离婚案件被告代理词
2015/05/23 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python