Wie Bootstrap Table die regelmäßige Datenaktualisierung implementiert (Code)

Der Inhalt dieses Artikels handelt davon, wie Bootstrap Table Daten (Code) regelmäßig aktualisieren kann. Ich hoffe, dass er für Freunde hilfreich ist.

Bootstrap Table implementiert regelmäßige Aktualisierungsdaten

Empfehlen Sie die zweite Methode

• Lassen Sie die Tabelle id ist realTimeTable

1. Zerstören Sie die Tabelle, fragen Sie die Daten erneut ab und hängen Sie sie dann an zu langsam ist, um die Serverdaten abzurufen, sehen Sie, wie die Tabelle Zeile für Zeile ansteigt

• Timer, wie oft es ausgeführt werden soll, Sie definieren es selbst, hier ist es 30S

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

• Definieren Sie zunächst eine Funktion, geben Sie die Abfragemethode updateRealTimeData und Ihre benutzerdefinierte Methode

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

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

                    }
                });
            }

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

2. Verwenden Sie die updateRow-Methode

• Zuallererst muss die Tabelle mit den darin enthaltenen Daten vorhanden sein, bevor Zeilen aktualisiert werden können, andernfalls hat dies keine Auswirkungen. Diese Methode verschwindet nicht und fügt dann die Tabelle wie oben beschrieben hinzu. Die darin enthaltenen Daten werden automatisch aktualisiert, hier ist 30S >Verwandte Empfehlungen:

• JQuery-Implementierung geplanter Aktualisierungsbeispiele

Verwenden Sie Dragsort + Bootstrap + PHP, um das Ziehen der Tabelle zu realisieren und die Sortierung automatisch beizubehalten , und fügen Sie die Seriennummer voran, um den Effekt rechtzeitig zu aktualisieren

Das obige ist der detaillierte Inhalt vonWie Bootstrap Table die regelmäßige Datenaktualisierung implementiert (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!