# 渲染表格相關參數說明
### 渲染表格需要的格式：
```
<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參數
~~~
