版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_37355951/article/details/79650735
概述：如何获取最新数据，定时任务自动刷新，但是如果利用Boostrap Table 的refresh或load方法，虽然能完成这个功能，问题是这样刷，整个页面会闪动一下。那么如何没有闪动这个不好效果，就要利用Bootstrap append方法。append就是连接问题，那么问题来了，如何去除重复数据？
方法一：可以选中整个表所有数据，然后一个一个剔除。（这是正常常规方法）。
方法二：是不是可以记录一下最后一条数据，怎么记录？然后你将这个作为条件参数传入后台查询数据库（这样可以减少查询数据量和Bootstrap比较的次数）,打算采用第二种方法
1、前提条件
- 引入jquery.js， 笔者采用是版本 v1.11.1
- 引入Boostrap 笔者采用是版本 bootstrap-3.3.7-dist
- 引入Bootstrap Table 最新版
2、引入css和js
css:注意修改成你的href
js: 注意修改成你的src
html:
<table id="table">
</table>3、自定义js
更新时间：2018年3月22日14:21:31
更新内容：增加sortName:'creTime', 增加一个排序列，采用降序 （防止maxId（等于每页显示数量）对应是本页最大值）
<script type="text/javascript" charset="utf-8">
var maxId=0; //保存主键最大值
$('#table').bootstrapTable({
url : '/demo/coffee/getCoffee',
pagination : true, //展示分页
showFooter : false, //展示页脚
showHeader : true, //展示页头
striped : true, //深浅颜色条纹行
sortName: 'creTime', //以时间为排序列
sortOrder:"desc", //降序
columns : [ {
checkbox : true
}, {
field : 'id',
title : '序号',
//visible : false, //注意这个要可见，否则下面Formatter不会执行
formatter : function(value, row, index) {
if(value>maxId){
console.log(maxId);
//主键最大值
maxId = value;
}
return value;
}
} /* , {
title : '序号',//标题 可不加
formatter : function(value, row, index) {
return index + 1;
}
} */, {
field : 'name',
title : '名称',
visible : false
}, {
field : 'status',
title : '状态',
formatter : function(value, row, index) {
if (value == 0) {
return '禁用';
} else if (value == 1) {
return '启用';
}
},
visible : false
}, {
field : 'opt',
title : '内容'
}, {
field : 'creTime',
title : '创建时间',
sortable: true,
formatter : function(value, row, index) {
if(value==null){
return "-";
}
return formatterDate(value);
}
}]
});
//定时任务调用
var timer2=window.setInterval(function(){
getFreshData();
console.log(maxId);
},1000);
function getFreshData(){
//继续查询命令执行状态
$.ajax({
url : '/demo/coffee/getCoffee?id='+maxId, //作为参数传入后台进行检验，只查询大于这个maxId的数据
method : 'get'
}).done(function(msg) {
var array = eval('('+msg+')');
//将数据追加到表格中
$('#table').bootstrapTable('append', array);
});
}
function formatterDate(value) {
var da = new Date(value);
var year = da.getFullYear() + '-';
var month = da.getMonth() + 1 + '-';
var date = da.getDate() + ' ';
var hour = (da.getHours() > 9 ? da.getHours() : '0' + da.getHours())
+ ':';
var min = (da.getMinutes() > 9 ? da.getMinutes() : '0'
+ da.getMinutes())
+ ':';
var sec = (da.getSeconds() > 9 ? da.getSeconds() : '0'
+ da.getSeconds());
return [ year, month, date, hour, min, sec ].join('');
}
</script>关键位置：
- id字段中Formatter函数中保存当前最大主键值
- 定时任务调用
url : '/demo/coffee/getCoffee?id='+maxId, 注意换成你自己请求地址
4、整个文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"></link>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../css/bootstrap-table.min.css">
</head>
<body>
<table id="table">
</table>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript"
src="../bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
<!-- Latest compiled and minified JavaScript -->
<script src="../lib/bootstrap-table.min.js" ></script>
<!-- Latest compiled and minified Locales -->
<script src="../lib/bootstrap-table-zh-CN.min.js">
</script>
<script type="text/javascript" charset="utf-8">
var maxId=0; //保存主键最大值
$('#table').bootstrapTable({
url : '/demo/coffee/getCoffee',
pagination : true,
showFooter : false,
showHeader : true,
striped : true,
sortable: true,
sortOrder:"asc",
columns : [ {
checkbox : true
}, {
field : 'id',
title : '序号',
//visible : false, //注意这个要可见，否则下面Formatter不会执行
formatter : function(value, row, index) {
if(value>maxId){
console.log(maxId);
//主键最大值
maxId = value;
}
return value;
}
} /* , {
title : '序号',//标题 可不加
formatter : function(value, row, index) {
return index + 1;
}
} */, {
field : 'name',
title : '名称',
visible : false
}, {
field : 'status',
title : '状态',
formatter : function(value, row, index) {
if (value == 0) {
return '禁用';
} else if (value == 1) {
return '启用';
}
},
visible : false
}, {
field : 'opt',
title : '内容'
}, {
field : 'creTime',
title : '创建时间',
sortable: true,
formatter : function(value, row, index) {
if(value==null){
return "-";
}
return formatterDate(value);
}
}]
});
//定时任务调用
var timer2=window.setInterval(function(){
getFreshData();
console.log(maxId);
},1000);
function getFreshData(){
//继续查询命令执行状态
$.ajax({
url : '/demo/coffee/getCoffee?id='+maxId, //作为参数传入后台进行检验，只查询大于这个maxId的数据
method : 'get'
}).done(function(msg) {
var array = eval('('+msg+')');
//将数据追加到表格中
$('#table').bootstrapTable('append', array);
});
}
function formatterDate(value) {
var da = new Date(value);
var year = da.getFullYear() + '-';
var month = da.getMonth() + 1 + '-';
var date = da.getDate() + ' ';
var hour = (da.getHours() > 9 ? da.getHours() : '0' + da.getHours())
+ ':';
var min = (da.getMinutes() > 9 ? da.getMinutes() : '0'
+ da.getMinutes())
+ ':';
var sec = (da.getSeconds() > 9 ? da.getSeconds() : '0'
+ da.getSeconds());
return [ year, month, date, hour, min, sec ].join('');
}
</script>
</body>
</html>涉及后台查询到数据库，你可以参考Spring+SpringMVC相关内容
这里只是抛砖引玉的。