layui表格数据与后端交互

Layui表格可以通过Ajax方式与后端进行交互获取数据。以下是一个示例：

前端代码：

layui.use(['table', 'form'], function(){
  var table = layui.table;
  
  //监听表格复选框选择
  table.on('checkbox(demo)', function(obj){
    console.log(obj)
  });
  
  //监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.msg('ID：'+ data.id + ' 的查看操作');
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.alert('编辑行：<br>'+ JSON.stringify(data))
    }
  });
  
  //执行渲染
  table.render({
    elem: '#test'
    ,url:'/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {type: 'checkbox'}
      ,{field: 'id', title: 'ID', width:80, sort: true}
      ,{field: 'username', title: '用户名', width:120}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:100}
      ,{field: 'sign', title: '签名', width: 200}
      ,{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:'操作', toolbar: '#barDemo', width:150}
    ]]
  });
});

后端代码：

@GetMapping("/demo/table/user/")
@ResponseBody
public TableDataInfo getUserList(User user)
{
    startPage();
    List<User> list = userService.selectUserList(user);
    return getDataTable(list);
}

其中，前端代码中的`url`属性指定了后端接口的URL地址，后端代码中的`getUserList`方法用于获取数据并返回给前端，`getDataTable`方法用于将数据格式化成前端需要的格式。在实际开发中，还需要根据具体的业务需求来进行调整。