<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据表格</title>
<!--layui模块化使用-->
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script src="layui/layui.js" text="text/javascript" charset="utf-8"></script>
</head>
<body>
<table id="tab_one"></table>
<hr>
<!--方法渲染-->
<table id="tab_two"></table>
<hr>
<!--
自动渲染
1、带*class="layui-table" 的<table>标签
2、对标签设置属性 *lay-data="" 用于配置表头信息
3、在<th> 标签中设置属性lay-date="" 用于配置表头信息
-->
<table class="layui-table" lay-data="{url:'js/user.json',page:true}">
<thead>
<tr>
<th lay-data="{field:'id'}">用户编号</th>
<th lay-data="{field:'username'}">用户名</th>
<th lay-data="{field:'sex',sort:true}">性别</th>
</tr>
</thead>
</table>
<hr>
<!--
转换静态表格
-->
<table lay-filter="tab_three">
<thead>
<tr>
<th lay-data="{field:'username'}">用户名</th>
<th lay-data="{field:'sex',sort:true}">性别</th>
<th lay-data="{field:'age'}">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>哈哈</td>
<td>66</td>
<td>30</td>
</tr>
</tbody>
</table>
<script text="text/javascript">
//加载table模块
layui.use("table",function(){
var table = layui.table;
table.render({
elem: "#tab_one", //elem属性用来绑定容器的id属性值
url: "js/user.json", //数据接口,通过服务器请求
cols: [[
{field:"id",title:'用户编号',sort:true,width:120},
{field:"username",title:'用户名',width:100},
{field:"sex",title:'性别',width:100,sort:true},
{field:"city",title:'城市',width:100,sort:true},
{field:"age",title:'年龄'},
]],
});
//方法渲染
table.render({
elem: "#tab_two",
url: "js/user.json", //数据接口,通过服务器请求
height:315,
page:true,
cols: [[
{field:"id",title:'用户编号',sort:true,width:120},
{field:"username",title:'用户名',width:100},
{field:"sex",title:'性别',width:100,sort:true},
{field:"city",title:'城市',width:100,sort:true},
{field:"age",title:'年龄'},
]]
});
table.init('tab_three',{
height:315 //设置高度
});
});
</script>
</body>
</html>
Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved
