boostrap-table+Interval()
boostrap-table中表格定时填充后台数据库中的数据
- 该场景是:后台有个线程,不断往数据库中填充数据。要求前台可以实时的展示数据库中的记录。
- 针对前端的页面展示,我直接采用boostrap-table进行数据展示,整合boostrap-table自带的分页功能。
- 直接上代码,后端Contrller需要返回html页面两个参数,rows,total。前端页面直接setInterval()定时填充数据。
// 后台controller代码## 标题
@RequestMapping("/epcnode/findAll")
@ResponseBody
public Map<String,Object> findAll(int pageNumber,int pageSize){
Map<String,Object> map = new HashMap<>();
Page<RWHistroty> all = rwHistoryService.findAll(pageNumber, pageSize);
map.put("rows",all.getContent());
map.put("total",all.getTotalElements()); // 满足条件的数据条数
return map;
}
前端js:
$(function() {
var destroy = $("#mytab").bootstrapTable("destroy");
var table = $("#mytab").bootstrapTable({
columns: [
{
align: "center",
halign: "center",
valign: "middle",
field: "",
title: "序号",
sortable: true,
formatter: function(value, row, index) {
return index + 1;
}
},
{
align: "center",
halign: "center",
valign: "middle",
field: "epctId",
title: "TID编号"
},
{
align: "center",
halign: "center",
valign: "middle",
field: "writeContent",
title: "写入记录"
},
{
align: "center",
halign: "center",
valign: "middle",
field: "time",
title: "操作时间",
formatter: function(value, row, index) {
return renderTime(value);
}
}
],
method: "post",
// 若以post方式提交,需要补充contentType信息,否则分页参数无法传递到controller
contentType: "application/x-www-form-urlencoded",
url: "/epcnode/findAll", // 查询传入起始页码数,后台需要计算起始查询条数
formatNoMatches: function() {
return "无符合条件的记录";
},
formatLoadingMessage: function() {
return "请稍等,正在加载中...";
},
cache: true,
striped: true, //是否显示行间隔色
pageNumber: 1, //初始化加载第一页,默认第一页
pagination: true, //是否分页
pageSize: 25,
pageList: [5, 10, 25, 50],
onlyInfoPagination: false,
smartDisplay: false,
toolbar: "#toolbar",
toolbarAlign: "left", //工具栏的位置
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
queryParamsType: "", // 设置为 '' 在这种情况下传给服务器的参数为:pageSize,pageNumber
queryParams: function(params) {
var temp = {
pageSize: params.pageSize,
pageNumber: params.pageNumber
// search:$("#searchText").val()
};
return temp;
}
});
var self = this;
setInterval(function() {
self.destroy;
self.table;
$('#mytab').bootstrapTable('refresh');
}, 3000);
// 隐藏主键显示
$("#mytab").bootstrapTable("hideColumn", "id");
});
function renderTime(date) {
var dateee = new Date(date).toJSON();
return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
}