1. 编写HTML页面
在HTML页面中，我们需要引入layui
框架和jQuery库，并创建一个
table元素，用于展示数据。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
动态查询</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-
input-inline">
<
input type="text" name="name" placeholder="请
输入姓名" autocomplete="off" class="layui-
input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-
input-inline">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="query">查询</button>
</div>
</div>
</form>
</div>
<div class="layui-col-md12">
<
table class="layui-hide" id="data-
table" lay-filter="data-
table"></
table>
</div>
</div>
</div>
</body>
</html>
```
2. 编写
JavaScript代码
在
JavaScript代码中，我们需要先定义一个数据源，然后使用layui的
table模块渲染
表格。接着，我们使用jQuery监听表单的提交事件，获取用户
输入的查询条件，然后根据条件重新渲染
表格。
```
layui.use(['
table', 'form'], function() {
var
table = layui.
table;
var form = layui.form;
// 定义数据源
var data = [{
id: 1,
name: '张三',
age: 20,
sex: '男',
email: '
[email protected]'
}, {
id: 2,
name: '李四',
age: 25,
sex: '女',
email: '
[email protected]'
}, {
id: 3,
name: '王五',
age: 30,
sex: '男',
email: '
[email protected]'
}];
// 渲染
表格
table.render({
elem: '#data-
table',
data: data,
cols: [[
{field: 'id', title: 'ID', width: 80, sort: true},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80, sort: true},
{field: 'sex', title: '性别', width: 80},
{field: 'email', title: '邮箱', minWidth: 200}
]],
page: true
});
// 监听表单提交事件
form.on('submit(query)', function(data) {
var name = data.field.name;
var newData = [];
for (var i = 0; i < data.length; i++) {
if (data[i].name.indexOf(name) >= 0) {
newData.push(data[i]);
}
}
table.reload('data-
table', {
data: newData
});
return false;
});
});
```
在上面的代码中，我们使用
table.render方法渲染
表格，并在form.on方法中监听表单的提交事件。当用户提交表单时，我们获取用户
输入的查询条件，然后遍历数据源，筛选出符合条件的数据，并重新渲染
表格。
至此，我们就成功地实现了使用layui
框架实现
table数据
表格的
动态查询。
1823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
