1. 引入
layui库和jQuery库。
```html
<!-- 引入
layui库 -->
<link rel="stylesheet" href="
layui/css/
layui.css">
<script src="
layui/
layui.js"></script>
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
```
2. 创建一个
表格容器。
```html
<div id="
table"></div>
```
3. 初始化
表格。
```
javascript
layui.use(['
table'], function() {
var
table =
layui.
table;
// 定义列
var cols = [
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80},
{field: 'sex', title: '性别', width: 80},
{field: 'address', title: '地址', width: 200}
];
// 初始化
表格
table.render({
elem: '#
table', // 容器id
url: '/data', //
数据接口
cols: [cols], // 列
page: true // 是否开启分页
});
});
```
4. 从服务器获取
数据。
```
javascript
layui.use(['
table'], function() {
var
table =
layui.
table;
var index = layer.load(1); // 加载动画
// 定义列
var cols = [
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80},
{field: 'sex', title: '性别', width: 80},
{field: 'address', title: '地址', width: 200}
];
// 获取
数据
$.ajax({
url: '/data',
type: 'GET',
dataType: '
json',
success: function(res) {
layer.close(index); // 关闭动画
table.render({
elem: '#
table', // 容器id
data: res.data, //
数据
cols: [cols], // 列
page: true // 是否开启分页
});
}
});
});
```
5. 实现
表格数据的
动态更新。
```
javascript
layui.use(['
table'], function() {
var
table =
layui.
table;
// 定义列
var cols = [
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80},
{field: 'sex', title: '性别', width: 80},
{field: 'address', title: '地址', width: 200}
];
// 初始化
表格
var
tableIns =
table.render({
elem: '#
table', // 容器id
url: '/data', //
数据接口
cols: [cols], // 列
page: true // 是否开启分页
});
// 刷新
表格数据
function refresh
Table() {
table.reload('
table', {
url: '/data',
done: function() {
setTimeout(refresh
Table, 5000); // 5秒后再次刷新
}
});
}
// 开始刷新
表格数据
setTimeout(refresh
Table, 5000); // 5秒后开始刷新
});
```
6. 完整的代码。
```html
<!DOCTYPE html>
<html>
<head>
<title>
动态表格数据</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入
layui库 -->
<link rel="stylesheet" href="
layui/css/
layui.css">
<script src="
layui/
layui.js"></script>
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="
table"></div>
<script>
layui.use(['
table'], function() {
var
table =
layui.
table;
// 定义列
var cols = [
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80},
{field: 'sex', title: '性别', width: 80},
{field: 'address', title: '地址', width: 200}
];
// 初始化
表格
var
tableIns =
table.render({
elem: '#
table', // 容器id
url: '/data', //
数据接口
cols: [cols], // 列
page: true // 是否开启分页
});
// 刷新
表格数据
function refresh
Table() {
table.reload('
table', {
url: '/data',
done: function() {
setTimeout(refresh
Table, 5000); // 5秒后再次刷新
}
});
}
// 开始刷新
表格数据
setTimeout(refresh
Table, 5000); // 5秒后开始刷新
});
</script>
</body>
</html>
```
最低0.47元/天 解锁文章
2636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
