Bootstrap Table implements method of regularly refreshing data-Bootstrap Tutorial-php.cn

Bootstrap Table implements method of regularly refreshing data

angryTom

Release： 2020-05-15 09:14:34

Original

3995 people have browsed it

Bootstrap Table implements method of regularly refreshing data

It is recommended to use the second method

Recommended tutorial:Bootstrap Getting Started Tutorial

Premise: Let the id of the table be realTimeTable

Method 1: Destroy the table, query the data again and append, if 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 the table increasing row by row

•Timer, how often to execute, Define it yourself, here is 30S

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

Copy after login

•First define a function, put in the query method updateRealTimeData and your customized 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

Method 2: Use updateRow method

•First, the table must exist with data in it to update the row , otherwise it has no effect. This method will not disappear and then add the table like the above method. This is the overall unchanged, and the data inside will be automatically updated.

•Timer, the same as above, how often to execute it, you can define it yourself, here It’s 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 == &#39;1&#39;) {
              changeData(j, msg, .....);
          }
        },
        error: function () {
          msgToast.error("查询数据出错");
        }
      });
    }

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

Copy after login

Summary

The above is the method introduced by the editor to refresh data regularly in Bootstrap Table. I hope it will be helpful to everyone. If you have any questions, please let me know. Leave a message and the editor will reply to you in time.

The above is the detailed content of Bootstrap Table implements method of regularly refreshing data. For more information, please follow other related articles on the PHP Chinese website!