How to refresh data regularly by Table in Bootstrap

This article mainly introduces the Bootstrap Table how to achieve regular refresh data, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Premise: make the id of the table realTimeTable

Method 1: destroy the table and append after querying the data. If you look up a large amount of data (for example, query information from many channels) and get the server data too slowly, you will see the increase of the table in one row.

Timer, how often to execute, self-defined, here is 30s

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

First define a function that contains the query method updateRealTimeData and the method you customize to use.

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

Method updateRealTimeData

Function updateRealTimeData () {if (errorFlag | | appid =-1) return; / / remove the tbody of the table, otherwise you will always add $("# realTimeTable") .bootstrapTable ('removeAll'); / / get data $.ajax ({data: {/ / some parameters sent to the server, such as date, game ID, etc.). . . . . }, type: "post", / / url, needless to say Otherwise, you don't know which interface to send to the server and request url: *, async: true, / / timeout timeout:30000, success: function (msg) {if (msg.code = ='1') {/ / the function defined to assign values to the table and customize the parameters you want to pass, but don't forget msg Or make a fart of showTableData (msg,.) ;})

Method showTableData

Function showTableData (msg, …) {tableData = []; for (var I = 0; I < json.length; iTunes +) {tableData.push ({/ / here is the name of data-field, and getDate is the name of the field returned by the server: date: Jason [I] .getDate. . . . }) / / arrays are arranged in reverse, using tableData.reverse () as appropriate; / / add data $("# realTimeTable") .bootstrapTable ('append', tableData);}} to the tbody

Method 2: use the updateRow method

First of all, there must be a table with data in it before the row can be updated, otherwise it won't work. This method will not disappear and then increase like the above method table, this is the whole unchanged, the data in it will be updated automatically

Timer, as above, how often to execute, self-defined, here is 30s

SetInterval (function () {queryAll (); for (var j = 0; j < the total number of requested data (that is, equal to the number of rows in the table); jacks +) {changeAllChannelRealTime (j,.);}}, 30000) Function changeAllChannelRealTime (j,.) {$.ajax ({data: {/ / some parameters sent to the server, such as date, game ID and so on. . . . . }, type: "post", / / url, needless to say Otherwise, you don't know which interface to send and request url: *, async: true, / / timeout timeout:30000, success: function (msg) {if (msg.code = ='1') {changeData (j, msg,.) }, error: function () {msgToast.error ("error querying data");}}) } function changeData (iupdateRow', msgjol.) {$('# realTime_Table'). BootstrapTable ('updateRow', {/ / I represents the number of lines, starting with 0, index: I, row: {/ / here is the name of data-field, * indicates the field name date: msg.*. . . . Thank you for reading this article carefully. I hope the article "how to refresh data regularly in Table in Bootstrap" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!