boostrap-table+Interval()
boostrap-table中表格定时填充后台数据库中的数据
- 该场景是：后台有个线程，不断往数据库中填充数据。要求前台可以实时的展示数据库中的记录。
- 针对前端的页面展示，我直接采用boostrap-table进行数据展示，整合boostrap-table自带的分页功能。
- 直接上代码，后端Contrller需要返回html页面两个参数，rows，total。前端页面直接setInterval()定时填充数据。
// 后台controller代码## 标题@RequestMapping("/epcnode/findAll")@ResponseBodypublic 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信息，否则分页参数无法传递到controllercontentType: "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,pageNumberqueryParams: 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/, '')}