Bootstrap Tableがタイミングでデータを更新する方法を実現します。
第二の方法を勧めます。
•表のidをrealTimeTableとする
1、表を壊して、データを調べたら、apped、大量のデータを調べたら(例えば、多くのチャンネルの情報を調べます)、サーバーのデータを得るのは遅すぎます。テーブルは一行の中で増加しています。
•タイマーは、どれぐらいの時間に一回実行しますか?自分で定義します。ここは30 Sです。
•まず、表が存在して、中にデータがあってこそ、行を更新することができます。この方法は上記のように表が消えてから増加しません。これは全体的に変わりません。中のデータは自動的に更新されます。
•タイマーは、上記と同じように、どれぐらいの時間で一回実行しますか?自分で定義します。ここは30 Sです。
以上は小编で绍介した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がタイミングよくデータを更新する方法です。皆さんに助けてほしいです。もし何か疑问がありましたら、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。