实现layui表格自动无感刷新,刷新时表格不能闪烁
时间: 2023-11-15 15:02:09 浏览: 275
要实现 layui 表格自动无感刷新,可以使用 layui 的表格刷新功能和定时器 setInterval 方法配合使用。
首先,在 layui 的表格初始化时,需要设置一个 id,比如:
```javascript
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
url: '/demo/table/user/',
id: 'demoTable',
cols: [[
{field:'id', title:'ID', width:80},
{field:'username', title:'用户名', width:120},
{field:'sex', title:'性别', width:80, sort:true},
{field:'city', title:'城市', width:100},
{field:'sign', title:'签名', width:150},
{field:'experience', title:'积分', width:80, sort: true},
{field:'score', title:'评分', width:80, sort: true},
{field:'classify', title:'职业', width:100},
{field:'wealth', title:'财富', width:135, sort: true},
{fixed: 'right', title:'操作', width:165, align:'center', toolbar: '#barDemo'}
]]
});
});
```
然后,在页面加载完成后,使用 setInterval 方法定时刷新表格:
```javascript
$(function() {
setInterval(function() {
layui.table.reload('demoTable', {
page: {
curr: 1 //重新从第 1 页开始
}
});
}, 10000); //每 10 秒钟刷新一次
});
```
这段代码中,我们使用 setInterval 方法每隔 10 秒钟刷新一次表格,其中 'demoTable' 参数是表格的 id,page.curr 参数代表重新从第一页开始刷新。
为了避免表格刷新时的闪烁,可以在 layui 的 table.reload 方法中加入 done 回调,用于在表格渲染完成后再显示表格:
```javascript
layui.table.reload('demoTable', {
page: {
curr: 1 //重新从第 1 页开始
},
done: function(res, curr, count) {
//表格渲染完成后,再显示表格
$('#demo').show();
}
});
```
这样,就可以实现 layui 表格自动无感刷新,刷新时表格不会闪烁。
阅读全文