layui怎么将数据展示在表格
时间: 2024-05-14 07:19:30 浏览: 106
layui实现显示数据表格、搜索和修改功能示例
中?
要在layui中展示数据,首先需要在HTML文件中创建一个表格。接着,在JavaScript文件中使用layui表格模块,通过ajax请求获取数据,将数据填充到表格中即可。以下是一个简单的示例代码:
HTML文件:
```
<table id="table"></table>
```
JavaScript文件:
```
layui.use('table', function(){
var table = layui.table;
//执行一个 table 实例
table.render({
elem: '#table', //绑定元素
url: '/api/data', //数据接口
cols: [[ //表头
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: '用户名', width: 120},
{field: 'sex', title: '性别', width: 80, sort: true},
{field: 'city', title: '城市', width: 120},
{field: 'sign', title: '签名', width: 200},
{field: 'classify', title: '职业', width: 100},
{field: 'wealth', title: '财富', width: 120, sort: true}
]]
});
});
```
其中,url是数据接口,返回的数据格式为json数组。cols是表格的列信息,可以自定义字段名、表头名和宽度等。以上示例代码仅供参考,具体实现需要根据具体需求进行调整。
阅读全文