Bootstrap Table implémente une méthode d'actualisation régulière des données

Il est recommandé d'utiliser la deuxième méthode

Tutoriel recommandé : Tutoriel de mise en route Bootstrap

Prémisse : Laissez l'identifiant de la table être realTimeTable

Méthode 1 : Détruisez la table, interrogez le données à nouveau et ajoutez-les, si Si vous vérifiez une grande quantité de données (par exemple : interrogez des informations sur de nombreux canaux) et qu'il est trop lent pour obtenir les données du serveur, vous verrez le tableau augmenter ligne par ligne

• Minuterie, à quelle fréquence d'exécution, définissez-la vous-même, voici 30S

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

•Définissez d'abord une fonction, mettez la méthode de requête updateRealTimeData et votre méthode personnalisée

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

•Méthode 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，……);
            }
          }
        });
      }

•Méthode 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);
      }
}

Méthode 2 : Utiliser la méthode updateRow

•Tout d'abord, la table doit exister avec des données. pour mettre à jour la ligne, sinon cela n'a aucun effet. Cette méthode ne disparaîtra pas, puis ajoutera le tableau comme la méthode ci-dessus. Celle-ci restera inchangée dans son ensemble et les données à l'intérieur seront automatiquement mises à jour

• Minuterie, la même que ci-dessus, à quelle fréquence. exécuté, vous pouvez le définir vous-même, ici C'est 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.*
            .
            .
            .
            .
        }
      });     
}

Résumé

Ce qui précède est la méthode présentée par l'éditeur pour actualiser régulièrement les données dans Bootstrap Table, j'espère que ce sera le cas. utile pour vous. Si vous avez des questions, veuillez me le faire savoir et l'éditeur vous répondra à temps.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!