在Layui中,可以使用table模块的filter()方法对列表数据进行筛选。
具体步骤如下:
<table class="layui-table" id="demo">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr class="data">
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr class="data">
<td>李四</td>
<td>20</td>
<td>女</td>
</tr>
<tr class="data">
<td>王五</td>
<td>22</td>
<td>男</td>
</tr>
</tbody>
</table>
layui.use('table', function(){
var table = layui.table;
table.on('tool(demo)', function(obj){
var data = obj.data; //获取当前行的数据
if (data) {
// 筛选条件
var filterData = $('.data').filter(function(){
return $(this).find('td').eq(2).text() === '男'; //筛选性别为男的数据
});
// 渲染筛选结果
$('#demo tbody').html(filterData);
table.render();
}
});
});
注意:
需要引入Layui的table模块,可以通过layui.use('table', function(){})
来使用。
使用table.on('tool(demo)', function(obj){})
监听表格的操作事件,可以根据实际需要选择监听的事件。
使用$('.data').filter(function(){})
对标记为class="data"的行进行筛选,可以根据具体需求自定义筛选条件。
使用$('#demo tbody').html(filterData)
将筛选结果渲染到表格中。
使用table.render()
重新渲染表格,使筛选结果生效。