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 相关文章推荐
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
浅析Ajax语法
Dec 05 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
JavaScript 如何计算文本的行数的实现
Sep 14 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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
php入门教程 精简版
2009/12/13 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
python列表的增删改查实例代码
2018/01/30 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
如何基于python操作excel并获取内容
2019/12/24 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Django实现内容缓存实例方法
2020/06/30 Python
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
临床医师个人自我评价
2014/04/06 职场文书
求职信范文大全
2014/05/26 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
家长会欢迎词
2015/01/23 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python