Bootstrap Tableがタイミングでデータを更新する方法を実現します。


第二の方法を勧めます。
•表のidをrealTimeTableとする
1、表を壊して、データを調べたら、apped、大量のデータを調べたら(例えば、多くのチャンネルの情報を調べます)、サーバーのデータを得るのは遅すぎます。テーブルは一行の中で増加しています。
•タイマーは、どれぐらいの時間に一回実行しますか?自分で定義します。ここは30 Sです。

setInterval(function() {
    queryAll();
}, 30000);
•まず関数を定義して、検索の方法udateRealTimeDataとあなたがカスタマイズして使う方法を入れます。

function queryAll() {
  updateRealTimeData();
    .
    .
    .
    .
}
•方法udateRealTimeData

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 < json.length; i++) {
        tableData.push({
          //     data-field   ,getDate          
          date: json[i].getDate,
            .
            .
            .
            .
        })
        //      ,     
        tableData.reverse();
        // tbody      
        $("#realTimeTable").bootstrapTable('append', tableData);
      }
}
2、udateRowの使い方
•まず、表が存在して、中にデータがあってこそ、行を更新することができます。この方法は上記のように表が消えてから増加しません。これは全体的に変わりません。中のデータは自動的に更新されます。
•タイマーは、上記と同じように、どれぐらいの時間で一回実行しますか?自分で定義します。ここは30 Sです。

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 == '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.*
            .
            .
            .
            .
        }
      });     
}
締め括りをつける
以上は小编で绍介したBootstrap Tableがタイミングよくデータを更新する方法です。皆さんに助けてほしいです。もし何か疑问がありましたら、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。