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: 'zhangsan@example.com'
}, {
id: 2,
name: '李四',
age: 25,
sex: '女',
email: 'lisi@example.com'
}, {
id: 3,
name: '王五',
age: 30,
sex: '男',
email: 'wangwu@example.com'
}];
// 渲染
表格
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数据表格的动态查询。
2860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
