layui实现数据表格table搜索静态数据的功能
时间: 2024-01-13 13:04:55 浏览: 285
好的,针对您的问题,您可以使用 layui 组件自带的表格过滤功能来实现搜索静态数据的功能。具体的步骤如下:
1. 引入 layui 组件库和 jQuery 库,并在 HTML 页面中定义一个表格元素。
2. 对表格进行初始化设置,设置表头和表格数据。
3. 设置表格中每一列可以进行搜索过滤。
4. 使用 layui 提供的表格过滤功能,同时进行数据的模糊搜索。
以下是示例代码:
HTML:
```
<table id="demo" lay-filter="test"></table>
```
JavaScript:
```
layui.use(['table', 'jquery'], function(){
var table = layui.table;
var $ = layui.jquery;
var data = [
{id: '1', username: 'admin', sex: '男'},
{id: '2', username: 'user1', sex: '女'},
{id: '3', username: 'user2', sex: '男'},
{id: '4', username: 'user3', sex: '女'},
{id: '5', username: 'user4', sex: '男'}
];
// 表格渲染
table.render({
elem: '#demo',
cols: [[
{field: 'id', title: 'ID'},
{field: 'username', title: '用户名'},
{field: 'sex', title: '性别'}
]],
data: data
});
// 设置每一列可以进行搜索过滤
table.set({
where: {
keyword: ''
}
});
$('.layui-input').on('keyup', function(){
var keyword = $(this).val();
// 使用 layui 提供的表格过滤功能
table.reload('demo', {
where: {
keyword: keyword
},
page: {
curr: 1
}
})
})
});
```
您可以将数据替换为您需要搜索的静态数据,然后根据表格的实际情况进行修改相关的代码。
阅读全文