JAVA学习记录（22）数据表格

最新推荐文章于 2022-06-26 21:21:15 发布

冯宾

最新推荐文章于 2022-06-26 21:21:15 发布

阅读量392

点赞数

文章标签： java javascript webview

本文链接：https://blog.csdn.net/m0_64898823/article/details/122309171

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: '../../demo/table/user/-page=1&limit=30.js' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});
});
</script>
</body>
</html>
............................................................................................................
<table lay-filter="demo">
<thead>
<tr>
<th lay-data="{field:'username', width:100}">昵称</th>
<th lay-data="{field:'experience', width:80, sort:true}">积分</th>
<th lay-data="{field:'sign'}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td>66</td>
<td>人生就像是一场修行a</td>
</tr>
<tr>
<td>贤心2</td>
<td>88</td>
<td>人生就像是一场修行b</td>
</tr>
<tr>
<td>贤心3</td>
<td>33</td>
<td>人生就像是一场修行c</td>
</tr>
</tbody>
</table>

冯宾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA学习记录（22）数据表格

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table模块快速使用</title> <link rel="stylesheet" href="/layui/css/layui.css" media="all"> </head> <body> <table id="demo" lay-filter="t
复制链接

扫一扫