- <!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>
JAVA学习记录(22)数据表格
最新推荐文章于 2024-03-29 15:56:55 发布