如果在使用 layui.table 组件时,需要重新渲染表格(例如:表格数据更新或者需要重新排序等操作),可以使用 table.reload()
方法。
table.reload()
方法的语法如下:
table.reload('表格的lay-filter值', {
where: { // 条件
key1: value1,
key2: value2,
// ...
},
page: { // 分页参数
curr: 1 // 重新从第一页开始
},
// 其他参数
});
其中,第一个参数是表格的 lay-filter
属性的值,第二个参数是一个对象,用来传递参数。
table.reload()
方法的参数说明:
where
:传递给后端的查询条件,可以是一个对象或一个函数,具体使用方法可以参考 layui 的文档。page
:分页参数,可以设置curr
参数,表示重新从第几页开始显示。- 其他参数:可以传递一些其他的配置参数,例如:排序、表头等,具体可以参考 layui 的文档。
下面是一个示例:
layui.use(['table'], function(){
var table = layui.table;
// 渲染表格
table.render({
elem: '#demo',
url: '/api/getData',
cols: [[
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: '用户名', width: 120},
{field: 'email', title: '邮箱'},
{field: 'phone', title: '手机'},
{field: 'status', title: '状态', width: 80},
{field: 'operate', title: '操作', toolbar: '#operateTpl', width: 160},
]],
});
// 监听按钮点击事件
$('#btn-refresh').click(function(){
// 重新加载数据
table.reload('demo', {
page: { curr: 1 }
});
});
});
在上述代码中,我们添加了一个按钮,并绑定了一个点击事件。当按钮被点击时,会重新加载表格数据,即重新渲染表格。
注意,table.reload()
方法必须在表格渲染后才能调用。如果需要在表格未渲染时调用,可以使用 table.render()
方法的 done
回调函数。