layui table 动态数据渲染格式代码
时间: 2023-09-01 17:06:20 浏览: 316
jQuery实现动态给table赋值的方法示例
以下是使用layui table渲染动态数据的示例代码:
HTML代码:
```html
<table class="layui-table" id="demo"></table>
```
JavaScript代码:
```javascript
// 模拟数据
var data = [
{id: 1, name: '小明', age: 18},
{id: 2, name: '小红', age: 20},
{id: 3, name: '小刚', age: 22},
];
// 渲染表格
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
data: data,
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'}
]]
});
});
```
以上代码会渲染一个包含三列数据的表格,每列分别为ID、姓名和年龄,表格中的数据来自于data数组。你可以根据自己的需求修改数据和表格列的数量、名称和顺序。
阅读全文