您现在的位置是:群英 > 开发技术 > web开发
Bootstrap表格怎样实现定时刷新数据,方法是什么
Admin发表于 2022-08-01 17:11:30842 次浏览
这篇文章主要为大家详细介绍了Bootstrap表格怎样实现定时刷新数据,方法是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望对大家学习或工作能有帮助。

推荐使用第二种方法

前提:令表格的id为realTimeTable

方法一:毁掉表格,再查询数据后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);
      }
}

方法二:使用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表格怎样实现定时刷新数据,方法是什么”的内容就介绍到这,感谢各位的阅读,相信大家对Bootstrap表格怎样实现定时刷新数据,方法是什么已经有了进一步的了解。大家如果还想学习更多知识,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: bootstrap table
相关信息推荐
2022-05-12 11:16:07 
摘要:这篇文章主要介绍了PHP代码加密和扩展解密实战,对加密解密感兴趣的同学,可以参考下
2022-04-28 14:07:12 
摘要:给大家带来一篇关于Python内存管理机制是什么的相关教程文章,内容涉及到Python、python教程等相关内容,更多关于python的内容希望能够帮助到大家。
2022-12-24 11:46:31 
摘要:php字符串反转的函数“strrev()”。strrev()函数的作用就是反转字符串,将字符串中字符的顺序翻转过来;该函数只接受一个必需参数“$string”用于进行反转操作,语法“strrev($string)”,会返回已反转的字符串。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部