# 渲染表格相关参数说明
### 渲染表格需要的格式:
```
<script>
layui.use(['form', 'table'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table;
table.render({
});
});
</script>
```
* 参数说明:elem
~~~
<table class="layui-hide" id="currentTableId" ></table>
// 指定原始 table 容器的选择器或 DOM,方法渲染方式必填
//实例说明 elem: '#currentTableId', 对应table容器的id值**
~~~
* 参数说明:toolbar
~~~
<script type="text/html" id="toolbarDemo">
<button class="layui-btn data-add-btn" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>添加学员
</button>
</script>
// 此处使用script标签是方便在html中不显示出来,也可以使用div加样式display : none
toolbar: '#toolbarDemo',
// table头部左侧的按钮
// 当toolbar的值为true时,左侧按钮为空只显示右侧按钮
~~~
* 参数说明:title
~~~
title : '学员登记表', // 数据导出时的文件名
~~~
* 参数说明:defaultToolbar
~~~
defaultToolbar: ['filter', 'exports', 'print', { // table头部右侧的按钮
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
~~~
* 参数说明:cols
~~~
cols: [[ // 数据
{type: "checkbox", width: 50},
{field: 'id', width: 80, title: 'ID', sort: true},
{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
]],
// 接口数据对应的数据个数
~~~
* 参数说明: limits
~~~
limits: [10, 15, 20, 25, 50, 100],
// 自定义分页选择框中的每页显示多少数据
~~~
* 参数说明:limit
~~~
limit: 15,
// 每页显示多少条数据
~~~
* 参数说明:page
~~~
page: true,
// 开启数据分页
~~~
* 参数说明:skin
~~~
skin: 'line'
// 开启表格数据隔行背景
~~~
* 参数说明:id
~~~
<table class="layui-hide" id="userList"></table>
// 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引
~~~
* cols中的参数:templet
~~~
cols: [[ //表头
{field:'create_time', title:'领取时间',
templet:function(data){
return layui.util.toDateString(data.create_time*1000, "yyyy-MM-dd HH:mm:ss");
}
},
{fixed: 'sex', title: '性别',templet:function (d) {
return d.sex == '男' ? '汉子':'妹子';
// 此处的 d 代表此行的数据
}}
]],
~~~
* cols中的toolbar
~~~
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit"> <i class="layui-icon"></i>编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"> <i class="layui-icon"></i>删除</a>
</script>
{fixed: 'right',title: '操作', width: 220, align:'center', toolbar: '#barDemo'}
// 标示表格中单行数据的操作,区别于table.render({ });中的toolbar参数
~~~