ホームページ >ウェブフロントエンド >jsチュートリアル >ブートストラップ テーブルが定期的なデータ更新を実装する方法 (コード)
この記事の内容は、Bootstrap Table での定期的な更新データ (コード) の実装方法に関するものです。必要な方は参考にしていただければ幸いです。
ブートストラップテーブルは定期的なデータ更新を実装します
2番目の方法をお勧めします
テーブルのIDをrealTimeTableにします
1.大量のデータをチェックする (例: 多くのチャネルから情報をクエリする) と、サーバー データを取得するのが遅すぎるため、テーブルが 1 行ずつ増加していることがわかります
タイマー、実行頻度はユーザーが定義しますあなた自身、ここに 30S があります
setInterval(function() { queryAll(); }, 30000);
まず関数を定義し、クエリメソッド updateRealTimeData とカスタマイズしたメソッドを入れます
function queryAll() { 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,……); } } }); }
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); } }
setInterval(function() { queryAll(); for (var j = 0; j < 请求的数据的总条数(也就等于表格的行数); j++) { changeAllChannelRealTime(j, .....); }}, 30000);
ドラッグソート + ブートストラップ + PHP を使用してテーブルのドラッグを実現し、並べ替えを自動的に維持し、タイムリーな更新効果のために前にシリアル番号を追加します
以上がブートストラップ テーブルが定期的なデータ更新を実装する方法 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。