layui中的table方法渲染

1. 什么是layui中的table方法渲染

在layui中，table是一个非常常用的模块，可以用来渲染表格数据。table方法是layui中渲染表格的一种方式，通过table方法可以快速的将数据渲染到table中，同时还可以对数据进行排序、分页等操作。

2. table方法的基本使用

2.1 引入layui

在使用layui框架时，首先需要引入layui库。

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

2.2 创建表格容器

在HTML页面中创建一个table容器：

<table id="demo" lay-filter="demo"></table>

其中，id为表格容器的唯一标识，lay-filter属性则是给表格添加了一个过滤器，方便我们在操作表格时能够根据过滤器执行相应的操作。

2.3 渲染表格数据

通过Layui的table方法，可以很方便地将数据渲染到表格中。

首先，需要在js代码中引入Layui的table模块：

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

然后，使用table.render()方法进行数据渲染，如下代码：

layui.use('table', function(){
  var table = layui.table;
  
  // 数据请求路径
  var url = 'data.json';
  // 渲染表格
  table.render({
    elem: '#demo',
    url: url,
    cols: [[
      {field:'id', title: 'ID', width:80},
      {field:'username', title:'用户名', width:120},
      {field:'email', title:'邮箱', width:200},
      {field:'age', title:'年龄', width:80},
      {field:'sex', title: '性别', width:80},
      {field:'city', title:'城市', width:120},
      {field:'sign', title:'签名', width:200},
      {field:'experience', title:'积分', width:100, sort: true},
      {field:'score', title: '评分', width:100, sort: true},
      {field:'classify', title: '职业', width:100},
      {field:'wealth', title: '财富', width:100}
    ]]
  });
});

在以上代码中，table.render()方法传入一个配置对象，其中的elem属性指定了表格容器的id，url属性指定了获取数据的后端接口地址，cols属性则是表格的列头信息。

2.4 后端接口返回数据格式

使用layui框架的前提是需要与后端进行数据交互，而且所传递的数据格式需要与layui规定的格式一致。

layui框架规定的后端接口数据格式:

{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data":[{
    "id": "10001",
    "username": "user-0",
    "email": "user-0@qq.com",
    "age": "10",
    "sex": "女",
    "city": "城市-0",
    "sign": "签名-0",
    "experience": "10",
    "score": "30",
    "classify": "作家",
    "wealth": "财富-0"
  }]
}

其中code为返回码，msg为返回信息，count为总条数，data为数据列表，需要与layui框架规定的属性一致，否则无法渲染成功。

3. 表格数据排序

通过table方法渲染表格数据后，可以对表格数据进行排序。在表格列头加上lay-sort属性即可实现排序功能，代码示例如下：

{field:'experience', title:'积分', width:100, sort: true},
{field:'score', title:'评分', width:100, sort: true},

4. 表格数据分页

表格数据分页也是常用的实现方式之一。可以使用table.render()方法中的page属性来开启分页，另外需要向表格容器中添加一个div容器，以用来展示分页器：

<table id="demo" lay-filter="demo"></table>
<div id="page"></div>

然后，需要使用Layui的paging模块对分页器进行实例化，并将实例化后的分页器赋值给table.render()方法中的page属性，代码示例如下：

layui.use(['table', 'laypage'], function(){
  var table = layui.table;
  var laypage = layui.laypage;
  
  // 数据请求路径
  var url = 'data.json';
  
  // 渲染表格
  table.render({
    elem: '#demo',
    url: url,
    cols: [[
      {field:'id', title:'ID', width:80},
      ...
    ]],
    page: true    // 开启分页
  });
  
  // 渲染分页器
  laypage.render({
    elem: 'page',    // 分页容器
    count: 50,    // 数据总数
    limit: 10,    // 每页显示的数据量
    curr: 1,    // 当前页码
    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh'],
    jump: function(obj, first){
      if(!first){
        // 数据请求路径
        var url = 'data.json?page=' + obj.curr + '&limit=' + obj.limit;
        
        // 重新渲染表格
        table.reload('demo', {
          url: url,
          where: {} 
        });
      }
    }
  });
});

以上代码中，laypage.render()方法用来渲染分页器，其中elem属性指定了分页容器的id，count属性指定了总数据量，limit属性指定了每页显示的数据量，curr属性指定了当前页码，layout属性指定了分页器的布局方式，而jump属性则指定了分页器跳转时的回调函数。

在jump回调函数中，需要重新渲染表格数据，具体操作可以使用table.reload()方法进行。

5. 总结

通过Layui的table方法，我们可以很方便地将数据渲染到表格中，同时还可以对表格数据进行排序、分页等操作。对于需要展示大量数据的项目来说，使用Layui的table方法渲染表格是一个非常不错的选择。