Bootstrap Table implementiert eine Methode zur regelmäßigen Aktualisierung von Daten

Es wird empfohlen, die zweite Methode zu verwenden

Empfohlenes Tutorial: Bootstrap Erste Schritte Tutorial

Prämisse: Die ID der Tabelle sei realTimeTable

Methode 1: Zerstöre die Tabelle, frage die ab Daten erneut und anhängen, wenn Sie eine große Datenmenge überprüfen (z. B. Informationen von vielen Kanälen abfragen) und es zu langsam ist, die Serverdaten abzurufen, wird die Tabelle Zeile für Zeile größer

• Timer, wie oft ausgeführt werden soll, definieren Sie es selbst, hier sind 30S

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

•Definieren Sie zunächst eine Funktion, geben Sie die Abfragemethode updateRealTimeData und Ihre benutzerdefinierte Methode

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

•Methode updateRealTimeData<🎜 ein >

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，……);
            }
          }
        });
      }

•Methode 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);
      }
}

Methode 2: UpdateRow-Methode verwenden

•Zuerst muss die Tabelle mit Daten darin vorhanden sein um die Zeile zu aktualisieren, sonst hat es keine Auswirkung. Diese Methode verschwindet nicht und fügt dann die Tabelle wie oben beschrieben hinzu. Dies bleibt als Ganzes unverändert und die darin enthaltenen Daten werden automatisch aktualisiert.

• Timer, derselbe wie oben, wie oft ausgeführt, Sie können es hier selbst definieren. Es ist 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.*
            .
            .
            .
            .
        }
      });     
}

Zusammenfassung

Das Obige ist die vom Herausgeber eingeführte Methode, um die Daten regelmäßig in der Bootstrap-Tabelle zu aktualisieren Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten.

Das obige ist der detaillierte Inhalt vonBootstrap Table implementiert eine Methode zur regelmäßigen Aktualisierung von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!