html5 已经用ajax 获取数据库的数据 table.render 如何显示
时间: 2024-05-08 19:18:38 浏览: 73
您可以使用layui组件库中的table模块来渲染您从数据库中获取的数据。首先,您需要在页面中引入layui的相关文件和jQuery库,然后定义一个table元素,在该元素上调用table.render方法,并传入一个options参数,该参数包括cols和data两个属性,分别表示表头列和数据行。具体代码如下:
```
// 定义表头列,其中field表示列对应的数据库字段名,title表示显示的列名
var cols = [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'}
]];
// 从服务器获取数据,示例代码使用$.ajax方法
$.ajax({
url: 'data.php',
success: function(res) {
// 解析服务端返回的JSON数据,生成表格数据行
var data = JSON.parse(res);
// 渲染表格
layui.use('table', function() {
var table = layui.table;
table.render({
elem: '#table', // 指定表格容器
cols: cols, // 设置表头列
data: data // 设置表格数据
});
});
}
});
```
其中,#table是您定义的表格容器的选择器。请修改代码中的field、title、url等参数为您实际的情况。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045021.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)