layui之数据表格–与后台交互获取数据的方法

首先，需要在后台构建好返回数据的接口，即后台返回数据应该是一个符合layui表格规范的JSON格式数据。

接下来的步骤是：

1. 引入layui库

在前端页面中，需要引入layui库，以便能够正常使用 layui 提供的数据表格组件。

<!-- 引入 layui 相关静态资源 -->
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js"></script>

1. 构建表格

使用 layui 提供的方法构建表格，需要按照layui数据表格组件的要求填写相应的参数：

layui.use('table', function(){
  var table = layui.table;

  //展示已知数据
  table.render({
    elem: '#demo'
    ,data: [{
      "id": "10001"
      ,"username": "张三"
      ,"email": "[e-mail]"
      ,"sex": "女"
      ,"city": "上海"
      ,"sign": "呵呵"
      ,"experience": "116"
      ,"ip": "192.168.0.1"
      ,"logins": "108"
      ,"joinTime": "2016-10-14"
    }]
    ,cols: [[ //标题栏
      {field: 'id', title: 'ID', width:"10%"}
      ,{field: 'username', title: '用户名', width:"20%"}
      ,{field: 'email', title: '邮箱', width:"25%"}
      ,{field: 'sex', title: '性别', width:"10%"}
      ,{field: 'city', title: '城市', width:"10%"}
      ,{field: 'sign', title: '签名'}
      ,{field: 'experience', title: '积分', width:"10%"}
      ,{field: 'ip', title: 'IP'}
      ,{field: 'logins', title: '登入次数', width:"10%"}
      ,{field: 'joinTime', title: '加入时间', width:"15%"}
    ]]
  });
});

1. 获取数据

用 Ajax 向后台发送请求，获取数据。

//第一个实例
layui.use('table', function(){
  var table = layui.table;

  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/test/table/demo1.json' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80}
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
});

以上就是通过 layui 数据表格与后台交互获取数据的方法。需要注意的是，上述代码中使用的后台数据应该是一个符合 layui 数据表格规范的 JSON 格式数据。