Dowemo

Using the jquery control bootstrapTable to implement timing refresh data

  • Assume that the table id is realtimetable

1, destroy the table and then query the data append, if you check large amounts of data ( for example: Querying information, and getting the server data too slow, you'll see a table added to a row of rows.

  • The timer, how long it takes to do it, define it, and here's the 30s

setInterval(function() {


 queryAll();


}, 30000);






  • Define a function that puts the query in the query updaterealtimedata and the method you're customizing.

function queryAll() {


 updateRealTimeData();


. 


. 


. 


. 


}






  • Method updaterealtimedate




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 == 22) {


 clearSession();


 //自己定义的消息弹出框,toastmessage


 msgToast.error('请重新登录!');


 setTimeout(function() {


 console.log('redirect');


 }, 1000)


 }


 //定义的函数实现对表格赋值,自定义想传的参数,但别忘了msg,不然搞个屁


 showTableData(msg,......);


 }


 }


 });


 }






  • Method 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, using jquery 's own method, default asc, you can customize

  • The timer, as well as above, how long it takes to do it, and it's 30s

setInterval(function() {


 queryAll();


 //最主要的就是这个,放在此方法自动向服务器请求并刷新数据


 $('#realTimeTable').bootstrapTable(


 "refresh",


 {


 //和上面的一样,向服务器请求的地址


 url:*****


 query:{


 //请求的参数


 appid:appid,


. 


. 


. 


 }


 }


 );


}, 30000);






  • The following table is assigned the same as the above and is no longer copied

Two methods, look at your mood, which you want to use, and the second writing is less


No.






Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs