layui怎么对列表数据进行筛选

avatar
作者
猴君
阅读量:6

在Layui中,可以使用table模块的filter()方法对列表数据进行筛选。

具体步骤如下:

  1. 在HTML中定义一个表格,并为每一行添加一个class属性,用于标识每一行的数据。
<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> 
  1. 在JavaScript中,使用filter()方法对列表数据进行筛选,并将筛选结果渲染到表格中。
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()重新渲染表格,使筛选结果生效。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!