1. table模块是layui最核心的组成之一。它用于对表格进行一系列功能和动态化数据操作, 涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右, 支持拖拽改变列宽度, 支持排序, 支持多级表头, 支持单元格的自定义模板, 支持对表格搜索、条件筛选等, 支持复选框, 支持分页, 支持单元格编辑等等一系列功能。
2. 模块加载名称: table。
3. 三种初始化渲染方式
3.1. 为了满足各种情况下的需求, layui对table模块做了三种初始化的支持, 你可按照个人喜好和实际情况灵活使用:
4. 自动渲染
4.1. 所谓的自动渲染, 即在一段table容器中配置好相应的参数, 由table模块内部自动对其完成渲染, 而无需你写初始的渲染方法。
4.2. 你需要关注的是以下三点:
4.2.1. 带有class="layui-table"的<table>标签。
4.2.2. 对<table>标签设置属性lay-data=""用于配置一些基础参数。
4.2.3. 在<th>标签中设置属性lay-data=""用于配置表头信息。
4.3. 按照上述的规范写好table原始容器后, 只要你加载了layui的table模块, 就会自动对其建立动态的数据表格。下面是一个示例:
<table class="layui-table" lay-data="{height: 250, url:'user.json', id: 'test1'}">
<thead>
<tr>
<th lay-data="{field: 'id'}">ID</th>
<th lay-data="{field: 'username'}">用户名</th>
<th lay-data="{field: 'sex'}">性别</th>
<th lay-data="{field: 'city'}">城市</th>
<th lay-data="{field: 'sign'}">签名</th>
<th lay-data="{field: 'experience'}">积分</th>
<th lay-data="{field: 'score'}">评分</th>
<th lay-data="{field: 'classify'}">职业</th>
<th lay-data="{field: 'wealth'}">财富</th>
</tr>
</thead>
</table>5. 方法渲染
5.1. 其实这是"自动化渲染"的手动模式, 本质类似, 只是"方法级渲染"将基础参数的设定放在了JS代码中, 且原始的table标签只需要一个选择器:
<table id="test2"></table>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test2' // 指定原始table容器的选择器
,height: 300 // 设定容器高度
,url: 'user.json' // 异步数据接口相关参数
,cols: [[ // 设置表头
{field: 'id', title: 'ID'}
,{field: 'username', title: '用户名'}
,{field: 'sex', title: '性别'}
,{field: 'city', title: '城市'}
,{field: 'sign', title: '签名'}
,{field: 'experience', title: '积分'}
,{field: 'score', title: '评分'}
,{field: 'classify', title: '职业'}
,{field: 'wealth', title: '财富'}
]]
});
});
</script>6. 转换静态表格
6.1. 假设你的页面已经存在了一段有内容的表格, 它由原始的table标签组成, 这时你需要赋予它一些动态元素, 比如: 拖拽调整列宽? 比如: 排序等等?那么你同样可以很轻松地去实现。尝试在你的静态表格的th标签中加上lay-data=""属性, 代码如下:
<table lay-filter="test3">
<thead>
<tr>
<th lay-data="{field: 'id'}">ID</th>
<th lay-data="{field: 'username'}">用户名</th>
<th lay-data="{field: 'sex'}">性别</th>
<th lay-data="{field: 'city'}">城市</th>
<th lay-data="{field: 'sign'}">签名</th>
<th lay-data="{field: 'experience'}">积分</th>
<th lay-data="{field: 'score'}">评分</th>
<th lay-data="{field: 'classify'}">职业</th>
<th lay-data="{field: 'wealth'}">财富</th>
</tr>
</thead>
<tbody>
<tr><td>10000</td><td>user-0</td><td>女</td><td>城市-0</td><td>签名-0</td><td>255</td><td>57</td><td>作家</td><td>82830700</td></tr>
<tr><td>10001</td><td>user-1</td><td>男</td><td>城市-1</td><td>签名-1</td><td>884</td><td>27</td><td>词人</td><td>64928690</td></tr>
<tr><td>10002</td><td>user-2</td><td>女</td><td>城市-2</td><td>签名-2</td><td>650</td><td>31</td><td>酱油</td><td>6298078</td></tr>
<tr><td>10003</td><td>user-3</td><td>女</td><td>城市-3</td><td>签名-3</td><td>362</td><td>68</td><td>作家</td><td>37117017</td></tr>
<tr><td>10004</td><td>user-4</td><td>男</td><td>城市-4</td><td>签名-4</td><td>807</td><td>6</td><td>作家</td><td>76263262</td></tr>
<tr><td>10005</td><td>user-5</td><td>女</td><td>城市-5</td><td>签名-5</td><td>173</td><td>87</td><td>作家</td><td>60344147</td></tr>
<tr><td>10006</td><td>user-6</td><td>女</td><td>城市-6</td><td>签名-6</td><td>982</td><td>34</td><td>作家</td><td>57768166</td></tr>
<tr><td>10007</td><td>user-7</td><td>男</td><td>城市-7</td><td>签名-7</td><td>727</td><td>28</td><td>作家</td><td>82030578</td></tr>
<tr><td>10008</td><td>user-8</td><td>男</td><td>城市-8</td><td>签名-8</td><td>951</td><td>14</td><td>词人</td><td>16503371</td></tr>
<tr><td>10009</td><td>user-9</td><td>女</td><td>城市-9</td><td>签名-9</td><td>484</td><td>75</td><td>词人</td><td>86801934</td></tr>
</tbody>
</table>6.2. 然后执行用于转换表格的JS方法, 就可以达到目的了:
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
// 转换静态表格
table.init('test3', {
height: 250 // 设定容器高度
});
});
</script>7. 三种初始化渲染方式例子
7.1. 新建一个名为layuiTable的动态WEB工程
7.2. 新建一个user.json文件
{
"code": 0,
"msg": "数据表格总数是根据下面count这个字段来计数的",
"count": 70,
"data": [{
"id": 10000,
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "签名-0",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
},
{
"id": 10001,
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "签名-1",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27
},
{
"id": 10002,
"username": "user-2",
"sex": "女",
"city": "城市-2",
"sign": "签名-2",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31
},
{
"id": 10003,
"username": "user-3",
"sex": "女",
"city": "城市-3",
"sign": "签名-3",
"experience": 362,
"logins": 157,
"wealth": 37117017,
"classify": "诗人",
"score": 68
},
{
"id": 10004,
"username": "user-4",
"sex": "男",
"city": "城市-4",
"sign": "签名-4",
"experience": 807,
"logins": 51,
"wealth": 76263262,
"classify": "作家",
"score": 6
},
{
"id": 10005,
"username": "user-5",
"sex": "女",
"city": "城市-5",
"sign": "签名-5",
"experience": 173,
"logins": 68,
"wealth": 60344147,
"classify": "作家",
"score": 87
},
{
"id": 10006,
"username": "user-6",
"sex": "女",
"city": "城市-6",
"sign": "签名-6",
"experience": 982,
"logins": 37,
"wealth": 57768166,
"classify": "作家",
"score": 34
},
{
"id": 10007,
"username": "user-7",
"sex": "男",
"city": "城市-7",
"sign": "签名-7",
"experience": 727,
"logins": 150,
"wealth": 82030578,
"classify": "作家",
"score": 28
},
{
"id": 10008,
"username": "user-8",
"sex": "男",
"city": "城市-8",
"sign": "签名-8",
"experience": 951,
"logins": 133,
"wealth": 16503371,
"classify": "词人",
"score": 14
},
{
"id": 10009,
"username": "user-9",
"sex": "女",
"city": "城市-9",
"sign": "签名-9",
"experience": 484,
"logins": 25,
"wealth": 86801934,
"classify": "词人",
"score": 75
},
{
"id": 10010,
"username": "user-10",
"sex": "女",
"city": "城市-10",
"sign": "签名-10",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
},
{
"id": 10011,
"username": "user-11",
"sex": "男",
"city": "城市-11",
"sign": "签名-11",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27
},
{
"id": 10012,
"username": "user-12",
"sex": "女",
"city": "城市-12",
"sign": "签名-12",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31
},
{
"id": 10013,
"username": "user-13",
"sex": "女",
"city": "城市-13",
"sign": "签名-13",
"experience": 362,
"logins": 157,
"wealth": 37117017,
"classify": "诗人",
"score": 68
},
{
"id": 10014,
"username": "user-14",
"sex": "男",
"city": "城市-14",
"sign": "签名-14",
"experience": 807,
"logins": 51,
"wealth": 76263262,
"classify": "作家",
"score": 6
},
{
"id": 10015,
"username": "user-15",
"sex": "女",
"city": "城市-15",
"sign": "签名-15",
"experience": 173,
"logins": 68,
"wealth": 60344147,
"classify": "作家",
"score": 87
},
{
"id": 10016,
"username": "user-16",
"sex": "女",
"city": "城市-16",
"sign": "签名-16",
"experience": 982,
"logins": 37,
"wealth": 57768166,
"classify": "作家",
"score": 34
},
{
"id": 10017,
"username": "user-17",
"sex": "男",
"city": "城市-17",
"sign": "签名-17",
"experience": 727,
"logins": 150,
"wealth": 82030578,
"classify": "作家",
"score": 28
},
{
"id": 10018,
"username": "user-18",
"sex": "男",
"city": "城市-18",
"sign": "签名-18",
"experience": 951,
"logins": 133,
"wealth": 16503371,
"classify": "词人",
"score": 14
},
{
"id": 10019,
"username": "user-19",
"sex": "女",
"city": "城市-19",
"sign": "签名-19",
"experience": 484,
"logins": 25,
"wealth": 86801934,
"classify": "词人",
"score": 75
},
{
"id": 10020,
"username": "user-20",
"sex": "女",
"city": "城市-20",
"sign": "签名-20",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
},
{
"id": 10021,
"username": "user-21",
"sex": "男",
"city": "城市-21",
"sign": "签名-21",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27
},
{
"id": 10022,
"username": "user-22",
"sex": "女",
"city": "城市-22",
"sign": "签名-22",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31
},
{
"id": 10023,
"username": "user-23",
"sex": "女",
"city": "城市-23",
"sign": "签名-23",
"experience": 362,
"logins": 157,
"wealth": 37117017,
"classify": "诗人",
"score": 68
},
{
"id": 10024,
"username": "user-24",
"sex": "男",
"city": "城市-24",
"sign": "签名-24",
"experience": 807,
"logins": 51,
"wealth": 76263262,
"classify": "作家",
"score": 6
},
{
"id": 10025,
"username": "user-25",
"sex": "女",
"city": "城市-25",
"sign": "签名-25",
"experience": 173,
"logins": 68,
"wealth": 60344147,
"classify": "作家",
"score": 87
},
{
"id": 10026,
"username": "user-26",
"sex": "女",
"city": "城市-26",
"sign": "签名-26",
"experience": 982,
"logins": 37,
"wealth": 57768166,
"classify": "作家",
"score": 34
},
{
"id": 10027,
"username": "user-27",
"sex": "男",
"city": "城市-27",
"sign": "签名-27",
"experience": 727,
"logins": 150,
"wealth": 82030578,
"classify": "作家",
"score": 28
},
{
"id": 10028,
"username": "user-28",
"sex": "男",
"city": "城市-28",
"sign": "签名-28",
"experience": 951,
"logins": 133,
"wealth": 16503371,
"classify": "词人",
"score": 14
},
{
"id": 10029,
"username": "user-29",
"sex": "女",
"city": "城市-29",
"sign": "签名-29",
"experience": 484,
"logins": 25,
"wealth": 86801934,
"classify": "词人",
"score": 75
},
{
"id": 10030,
"username": "user-30",
"sex": "女",
"city": "城市-30",
"sign": "签名-30",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
},
{
"id": 10031,
"username": "user-31",
"sex": "男",
"city": "城市-31",
"sign": "签名-31",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27
},
{
"id": 10032,
"username": "user-32",
"sex": "女",
"city": "城市-32",
"sign": "签名-32",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31
},
{
"id": 10033,
"username": "user-33",
"sex": "女",
"city": "城市-33",
"sign": "签名-33",
"experience": 362,
"logins": 157,
"wealth": 37117017,
"classify": "诗人",
"score": 68
},
{
"id": 10034,
"username": "user-34",
"sex": "男",
"city": "城市-34",
"sign": "签名-34",
"experience": 807,
"logins": 51,
"wealth": 76263262,
"classify": "作家",
"score": 6
},
{
"id": 10035,
"username": "user-35",
"sex": "女",
"city": "城市-35",
"sign": "签名-35",
"experience": 173,
"logins": 68,
"wealth": 60344147,
"classify": "作家",
"score": 87
},
{
"id": 10036,
"username": "user-36",
"sex": "女",
"city": "城市-36",
"sign": "签名-36",
"experience": 982,
"logins": 37,
"wealth": 57768166,
"classify": "作家",
"score": 34
},
{
"id": 10037,
"username": "user-37",
"sex": "男",
"city": "城市-37",
"sign": "签名-37",
"experience": 727,
"logins": 150,
"wealth": 82030578,
"classify": "作家",
"score": 28
},
{
"id": 10038,
"username": "user-38",
"sex": "男",
"city": "城市-38",
"sign": "签名-38",
"experience": 951,
"logins": 133,
"wealth": 16503371,
"classify": "词人",
"score": 14
},
{
"id": 10039,
"username": "user-39",
"sex": "女",
"city": "城市-39",
"sign": "签名-39",
"experience": 484,
"logins": 25,
"wealth": 86801934,
"classify": "词人",
"score": 75
},
{
"id": 10040,
"username": "user-40",
"sex": "女",
"city": "城市-40",
"sign": "签名-40",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
},
{
"id": 10041,
"username": "user-41",
"sex": "男",
"city": "城市-41",
"sign": "签名-41",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27
},
{
"id": 10042,
"username": "user-42",
"sex": "女",
"city": "城市-42",
"sign": "签名-42",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31
},
{
"id": 10043,
"username": "user-43",
"sex": "女",
"city": "城市-43",
"sign": "签名-43",
"experience": 362,
"logins": 157,
"wealth": 37117017,
"classify": "诗人",
"score": 68
},
{
"id": 10044,
"username": "user-44",
"sex": "男",
"city": "城市-44",
"sign": "签名-44",
"experience": 807,
"logins": 51,
"wealth": 76263262,
"classify": "作家",
"score": 6
},
{
"id": 10045,
"username": "user-45",
"sex": "女",
"city": "城市-45",
"sign": "签名-45",
"experience": 173,
"logins": 68,
"wealth": 60344147,
"classify": "作家",
"score": 87
},
{
"id": 10046,
"username": "user-46",
"sex": "女",
"city": "城市-46",
"sign": "签名-46",
"experience": 982,
"logins": 37,
"wealth": 57768166,
"classify": "作家",
"score": 34
},
{
"id": 10047,
"username": "user-47",
"sex": "男",
"city": "城市-47",
"sign": "签名-47",
"experience": 727,
"logins": 150,
"wealth": 82030578,
"classify": "作家",
"score": 28
},
{
"id": 10048,
"username": "user-48",
"sex": "男",
"city": "城市-48",
"sign": "签名-48",
"experience": 951,
"logins": 133,
"wealth": 16503371,
"classify": "词人",
"score": 14
},
{
"id": 10049,
"username": "user-49",
"sex": "女",
"city": "城市-49",
"sign": "签名-49",
"experience": 484,
"logins": 25,
"wealth": 86801934,
"classify": "词人",
"score": 75
},
{
"id": 10050,
"username": "user-50",
"sex": "女",
"city": "城市-50",
"sign": "签名-50",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
},
{
"id": 10051,
"username": "user-51",
"sex": "男",
"city": "城市-51",
"sign": "签名-51",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27
},
{
"id": 10052,
"username": "user-52",
"sex": "女",
"city": "城市-52",
"sign": "签名-52",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31
},
{
"id": 10053,
"username": "user-53",
"sex": "女",
"city": "城市-53",
"sign": "签名-53",
"experience": 362,
"logins": 157,
"wealth": 37117017,
"classify": "诗人",
"score": 68
},
{
"id": 10054,
"username": "user-54",
"sex": "男",
"city": "城市-54",
"sign": "签名-54",
"experience": 807,
"logins": 51,
"wealth": 76263262,
"classify": "作家",
"score": 6
},
{
"id": 10055,
"username": "user-55",
"sex": "女",
"city": "城市-55",
"sign": "签名-55",
"experience": 173,
"logins": 68,
"wealth": 60344147,
"classify": "作家",
"score": 87
},
{
"id": 10056,
"username": "user-56",
"sex": "女",
"city": "城市-56",
"sign": "签名-56",
"experience": 982,
"logins": 37,
"wealth": 57768166,
"classify": "作家",
"score": 34
},
{
"id": 10057,
"username": "user-57",
"sex": "男",
"city": "城市-57",
"sign": "签名-57",
"experience": 727,
"logins": 150,
"wealth": 82030578,
"classify": "作家",
"score": 28
},
{
"id": 10058,
"username": "user-58",
"sex": "男",
"city": "城市-58",
"sign": "签名-58",
"experience": 951,
"logins": 133,
"wealth": 16503371,
"classify": "词人",
"score": 14
},
{
"id": 10059,
"username": "user-59",
"sex": "女",
"city": "城市-59",
"sign": "签名-59",
"experience": 484,
"logins": 25,
"wealth": 86801934,
"classify": "词人",
"score": 75
},
{
"id": 10060,
"username": "user-60",
"sex": "女",
"city": "城市-60",
"sign": "签名-60",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
},
{
"id": 10061,
"username": "user-61",
"sex": "男",
"city": "城市-61",
"sign": "签名-61",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27
},
{
"id": 10062,
"username": "user-62",
"sex": "女",
"city": "城市-62",
"sign": "签名-62",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31
},
{
"id": 10063,
"username": "user-63",
"sex": "女",
"city": "城市-63",
"sign": "签名-63",
"experience": 362,
"logins": 157,
"wealth": 37117017,
"classify": "诗人",
"score": 68
},
{
"id": 10064,
"username": "user-64",
"sex": "男",
"city": "城市-64",
"sign": "签名-64",
"experience": 807,
"logins": 51,
"wealth": 76263262,
"classify": "作家",
"score": 6
},
{
"id": 10065,
"username": "user-65",
"sex": "女",
"city": "城市-65",
"sign": "签名-65",
"experience": 173,
"logins": 68,
"wealth": 60344147,
"classify": "作家",
"score": 87
},
{
"id": 10066,
"username": "user-66",
"sex": "女",
"city": "城市-66",
"sign": "签名-66",
"experience": 982,
"logins": 37,
"wealth": 57768166,
"classify": "作家",
"score": 34
},
{
"id": 10067,
"username": "user-67",
"sex": "男",
"city": "城市-67",
"sign": "签名-67",
"experience": 727,
"logins": 150,
"wealth": 82030578,
"classify": "作家",
"score": 28
},
{
"id": 10068,
"username": "user-68",
"sex": "男",
"city": "城市-68",
"sign": "签名-68",
"experience": 951,
"logins": 133,
"wealth": 16503371,
"classify": "词人",
"score": 14
},
{
"id": 10069,
"username": "user-69",
"sex": "女",
"city": "城市-69",
"sign": "签名-69",
"experience": 484,
"logins": 25,
"wealth": 86801934,
"classify": "词人",
"score": 75
}]
}7.3. 新建一个table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table三种初始化渲染方式 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<h2>自动渲染</h2>
<table class="layui-table" lay-data="{height: 250, url:'user.json', id: 'test1'}">
<thead>
<tr>
<th lay-data="{field: 'id'}">ID</th>
<th lay-data="{field: 'username'}">用户名</th>
<th lay-data="{field: 'sex'}">性别</th>
<th lay-data="{field: 'city'}">城市</th>
<th lay-data="{field: 'sign'}">签名</th>
<th lay-data="{field: 'experience'}">积分</th>
<th lay-data="{field: 'score'}">评分</th>
<th lay-data="{field: 'classify'}">职业</th>
<th lay-data="{field: 'wealth'}">财富</th>
</tr>
</thead>
</table>
<h2>方法渲染</h2>
<table id="test2"></table>
<h2>转换静态表格</h2>
<table lay-filter="test3">
<thead>
<tr>
<th lay-data="{field: 'id'}">ID</th>
<th lay-data="{field: 'username'}">用户名</th>
<th lay-data="{field: 'sex'}">性别</th>
<th lay-data="{field: 'city'}">城市</th>
<th lay-data="{field: 'sign'}">签名</th>
<th lay-data="{field: 'experience'}">积分</th>
<th lay-data="{field: 'score'}">评分</th>
<th lay-data="{field: 'classify'}">职业</th>
<th lay-data="{field: 'wealth'}">财富</th>
</tr>
</thead>
<tbody>
<tr><td>10000</td><td>user-0</td><td>女</td><td>城市-0</td><td>签名-0</td><td>255</td><td>57</td><td>作家</td><td>82830700</td></tr>
<tr><td>10001</td><td>user-1</td><td>男</td><td>城市-1</td><td>签名-1</td><td>884</td><td>27</td><td>词人</td><td>64928690</td></tr>
<tr><td>10002</td><td>user-2</td><td>女</td><td>城市-2</td><td>签名-2</td><td>650</td><td>31</td><td>酱油</td><td>6298078</td></tr>
<tr><td>10003</td><td>user-3</td><td>女</td><td>城市-3</td><td>签名-3</td><td>362</td><td>68</td><td>作家</td><td>37117017</td></tr>
<tr><td>10004</td><td>user-4</td><td>男</td><td>城市-4</td><td>签名-4</td><td>807</td><td>6</td><td>作家</td><td>76263262</td></tr>
<tr><td>10005</td><td>user-5</td><td>女</td><td>城市-5</td><td>签名-5</td><td>173</td><td>87</td><td>作家</td><td>60344147</td></tr>
<tr><td>10006</td><td>user-6</td><td>女</td><td>城市-6</td><td>签名-6</td><td>982</td><td>34</td><td>作家</td><td>57768166</td></tr>
<tr><td>10007</td><td>user-7</td><td>男</td><td>城市-7</td><td>签名-7</td><td>727</td><td>28</td><td>作家</td><td>82030578</td></tr>
<tr><td>10008</td><td>user-8</td><td>男</td><td>城市-8</td><td>签名-8</td><td>951</td><td>14</td><td>词人</td><td>16503371</td></tr>
<tr><td>10009</td><td>user-9</td><td>女</td><td>城市-9</td><td>签名-9</td><td>484</td><td>75</td><td>词人</td><td>86801934</td></tr>
</tbody>
</table>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test2' // 指定原始table容器的选择器
,height: 300 // 设定容器高度
,url: 'user.json' // 异步数据接口相关参数
,cols: [[ // 设置表头
{field: 'id', title: 'ID'}
,{field: 'username', title: '用户名'}
,{field: 'sex', title: '性别'}
,{field: 'city', title: '城市'}
,{field: 'sign', title: '签名'}
,{field: 'experience', title: '积分'}
,{field: 'score', title: '评分'}
,{field: 'classify', title: '职业'}
,{field: 'wealth', title: '财富'}
]]
});
// 转换静态表格
table.init('test3', {
height: 250 // 设定容器高度
});
});
</script>
</body>
</html>7.4. 拷贝layui到WebContent目录下
7.5. 运行项目, 效果图
