How Bootstrap Table implements regular data refresh (code)-JS Tutorial-php.cn

How Bootstrap Table implements regular data refresh (code)

不言

Release： 2018-09-07 16:38:02

Original

3998 people have browsed it

The content of this article is about how to implement regular refresh data (code) in Bootstrap Table. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Bootstrap Table implements regular data refresh

Recommend the second method

Order the table The id is realTimeTable

1. Destroy the table, query the data again and then append. If you check a large amount of data (for example: query information from many channels), and it is too slow to obtain the server data , you will see that the table is added row by row

Timer, how often to execute, you define it yourself, here is 30S

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

Copy after login

First define a function and put in it the query method updateRealTimeData and your custom method

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

Copy after login

method updateRealTimeData

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

                    }
                });
            }

Copy after login

Method 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(&#39;append&#39;, tableData);
            }
}

Copy after login

2. Use updateRow method

First of all, the table must exist with data in it before rows can be updated, otherwise it will have no effect. This method will not disappear and then add the table like the above method. This will remain unchanged as a whole. The data inside will be automatically updated.
Timer, the same as above, how often it will be executed. Define it yourself, here is 30S

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

Copy after login

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

Copy after login

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

Copy after login

Related recommendations:

JQuery implementation of scheduled refresh examples

Use dragsort bootstrap php to realize table dragging to automatically maintain the sorting, and add the serial number in front to update the effect in time

The above is the detailed content of How Bootstrap Table implements regular data refresh (code). For more information, please follow other related articles on the PHP Chinese website!