ブートストラップ テーブルが定期的なデータ更新を実装する方法 (コード)

この記事の内容は、Bootstrap Table での定期的な更新データ (コード) の実装方法に関するものです。必要な方は参考にしていただければ幸いです。

ブートストラップテーブルは定期的なデータ更新を実装します

2番目の方法をお勧めします

• テーブルのIDをrealTimeTableにします

1.大量のデータをチェックする (例: 多くのチャネルから情報をクエリする) と、サーバー データを取得するのが遅すぎるため、テーブルが 1 行ずつ増加していることがわかります

• タイマー、実行頻度はユーザーが定義しますあなた自身、ここに 30S があります

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

• まず関数を定義し、クエリメソッド updateRealTimeData とカスタマイズしたメソッドを入れます

メソッド updateRealTimeData

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

  ログイン後にコピー

メソッド showTableData

• りー
2 . updateRow メソッドを使用します

まず、行を更新する前にテーブルにデータが存在する必要があります。そうでない場合は機能しません。このメソッドは、上記のメソッドのようにテーブルを追加しても、全体としては変更されません。タイマーは上記と同じで、実行頻度は自分で定義します。それは 30 秒です

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

  ログイン後にコピー

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

  ログイン後にコピー

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

  ログイン後にコピー
  関連する推奨事項:

• スケジュールされた更新の例の JQuery 実装

ドラッグソート + ブートストラップ + PHP を使用してテーブルのドラッグを実現し、並べ替えを自動的に維持し、タイムリーな更新効果のために前にシリアル番号を追加します

以上がブートストラップ テーブルが定期的なデータ更新を実装する方法 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。