layui表格刷新 但不重新渲染的方法 layui表格如何自动刷新

问题1:layui如何做到刷新表格 而不重新渲染

使用如下方法重新加载表格时会出现页面闪动,以及表格位置会重置的问题

deviceTable.reload()

目前有如下方法可以实现刷新的同时而不重新渲染页面
首先你需要结合layui表格插件和layui分页插件

let xxxTable= table.render({
	......
	page: {
		layout: ['prev', 'next', 'page', 'skip', 'count', 'limit', 'refresh']
	}
	......
});

使用上述代码会覆盖你的分页按钮,可自由调整按钮顺序,各参数含义如下
prev上一页按钮
next下一页按钮
page 1,2,3,4 页码按钮
skip输入页码跳转按钮
count总数据数量显示
limit每页显示数据限制选择
refresh刷新按钮(本文核心)

由于该刷新按钮只能在页码这一行,如果不满足你的需求,我们可以通过jQuery调用该按钮的点击事件从而达到不渲染刷新的效果,代码如下

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

可在该页面任意地方使用,举个栗子,自动刷新代码如下

let ref = null;
$("#toggleRefresh").click(function () {
	if (ref == null) {
		ref = setInterval(function () {
			$(".layui-icon-refresh").click();
		}, 2000);
	} else {
		clearInterval(ref);
		ref = null;
	}
});

上述代码绑定至一个按钮即可实现开关自动刷新功能

要实现 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 表格自动无感刷新刷新表格不会闪烁。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无枫丶

谢谢老板!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值