layUI实现列表查询功能

<div class="demoTable"> 搜索ID： <div class="layui-inline"> <input class="layui-input" name="id" id="demoReload" autocomplete="off"> </div> <button class="layui-btn" data-type="reload">搜索</button></div><table class="layui-hide" id="LAY_table_user" lay-filter="user"></table><script src="js/layui/layui.js" charset="utf-8"></script><script> layui.use('table', function(){ var table = layui.table; //方法级渲染 var tabins = table.render({  elem: '#LAY_table_user'  ,url: 'new_file.json'  ,cols: [[  {checkbox: true, fixed: true}  ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}  ,{field:'username', title: '用户名', width:80}  ,{field:'sex', title: '性别', width:80, sort: true}  ,{field:'city', title: '城市', width:80}  ,{field:'sign', title: '签名'}  ,{field:'experience', title: '积分', sort: true, width:80}  ,{field:'score', title: '评分', sort: true, width:80}  ,{field:'classify', title: '职业', width:80}  ,{field:'wealth', title: '财富', sort: true, width:135}  ]]  ,id: 'testReload'  ,page: true  ,height: 315  ,done:function(res){  } }); var $ = layui.$, active = {  reload: function(){  var demoReload = $('#demoReload');  //执行重载  table.reload('testReload', {   page: {   curr: 1 //重新从第 1 页开始   }   ,where: {   key: {    id: demoReload.val()   }   }  });  } }; $('.demoTable .layui-btn').on('click', function(){  search = $('#demoReload').val();  $('.layui-table-fixed tbody tr').each(function(i){   var id = $(this).children('td').eq(1).children('div').html();   if(id.indexOf(search)>=0){   $(this).show()   $('.layui-table-main tbody tr').eq(i).show()   }else{   $('.layui-table-main tbody tr').eq(i).hide()   $(this).hide();   }  }); }); });</script></body></html>