boostrap-table+Interval()定时填充数据

boostrap-table+Interval()
boostrap-table中表格定时填充后台数据库中的数据

1. 该场景是：后台有个线程，不断往数据库中填充数据。要求前台可以实时的展示数据库中的记录。
2. 针对前端的页面展示，我直接采用boostrap-table进行数据展示，整合boostrap-table自带的分页功能。
3. 直接上代码，后端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/, '')
        }