解决layui表格刷新闪屏问题

按照官方文档，使用如下代码重新加载表格时，会出现页面闪动，以及表格位置会重置的问题。

1
yourTable.reload();

目前，有如下可以实现刷新表格的同时，但不会对表格进行重新渲染的方法。
你需要结合layui表格插件，以及layui分页插件。
代码如下：

1
2
3
4
5
6
7
let yourTable= table.render({
	// 其他表格配置
	page: {
		layout: ['prev', 'next', 'page', 'skip', 'count', 'limit', 'refresh']
	}
	// 省略...
});

使用上述代码后，会覆盖你的分页按钮配置，不过你可自由调整这些按钮的顺序，各个参数含义如下：

  • prev 上一页按钮
  • next 下一页按钮
  • page 页码按钮
  • skip 输入页码跳转按钮
  • count 总数据数量显示
  • limit 每页显示数据限制选择
  • refresh 刷新按钮（关键）

但是，仅有在用户点击了分页一栏中刷新按钮时，才会触发这种不会重新渲染表格的刷新方式。
这肯定不能满足大部分开发者的需求，所以，我们可以通过jQuery调用该按钮的点击事件从而达到不渲染刷新的效果，代码如下：

1
$(".layui-icon-refresh").click();

如果你想使代码更严谨，你可以在.layui-icon-refresh前面加上你表格的相关选择器。

现在，你就可以在该页面的任意地方调用这句代码，从而实现刷新layui表格，但是又不会使表格重新完全渲染了，也就不会发生表格闪动、重置等问题了。

layui表格定时刷新

你还可以利用上述代码，实现一个定时刷新的功能，并且也是不会发生闪屏、重置等问题的。
具体实现代码如下：

1
2
3
4
5
6
7
8
9
10
11
let ref = null;
$("#toggleRefresh").click(function () {
	if (ref == null) {
		ref = setInterval(function () {
			$(".layui-icon-refresh").click();
		}, 2000);
	} else {
		clearInterval(ref);
		ref = null;
	}
});

上述代码使用了ES6特性let，早期版本浏览器（如IE6）不支持，可以自行修改。

现在，你可以创建一个ID为toggleRefresh的按钮来实现点击后定时刷新了。