layui.table绘制好的表格怎么重新渲染

如果在使用 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 回调函数。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值