Bootstrap Table如何实现定时刷新数据(代码)

本篇文章给大家带来的内容是关于bootstrap table如何实现定时刷新数据(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

Bootstrap Table实现定时刷新数据

推荐第二种方法

令表格的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 

2、使用updateRow方法

登录后复制

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

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

setInterval(function() {        queryAll();                for (var j = 0; j 
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.*                        .                        .                        .                        .                }            });         }

登录后复制

相关推荐:

JQuery实现定时刷新实例讲解

JQuery实现定时刷新实例讲解

以上就是Bootstrap Table如何实现定时刷新数据(代码)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2742128.html

(0)
上一篇 2025年3月8日 02:45:26
下一篇 2025年3月8日 02:45:38

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论