layUI可以直接使用本地的json文件进行列表数据渲染，但，我们会发现，官网ctr+c，ctr+v 过来的代码在做查询时每次看起来都有列表刷新的动作，但实际操作无效，百度了一大圈也没找到具体的原因，无奈继续回去看官网，后面总结出只有一点，也是大家比较容易忽略的一点： 官网说在查询时的url必须设置异步接口，so，如果我们不借助后台看起来这个效果好像是单靠前端是出不来，但，为了本地演示，这里写了一个很low的方法，单靠show()，hide()方法来实现查询效果（效果演示可以单不建议实际开发中使用该方法）
以下代码粘贴复制便可直接使用：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>更正地址</title> 6 <style> 7 </style> 8 <link href="layui/css/layui.css" rel="stylesheet" /> 9 </head> 10 <body> 11 12 <div class="demoTable"> 13 搜索ID： 14 <div class="layui-inline"> 15 <input class="layui-input" name="id" id="demoReload" autocomplete="off"> 16 </div> 17 <button class="layui-btn" data-type="reload">搜索</button> 18 </div> 19 20 <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table> 21 22 <script src="layui/layui.js" charset="utf-8"></script> 23 <script> 24 layui.use('table', function () { 25 var table = layui.table; 26 //方法级渲染 27 var tabins = table.render({ 28 elem: '#LAY_table_user' 29 , url: 'demo/table/user.json' 30 , cols: [[ 31 { checkbox: true, fixed: true } 32 , { field: 'id', title: 'ID', 80, sort: true, fixed: true } 33 , { field: 'username', title: '用户名', 80 } 34 , { field: 'sex', title: '性别', 80, sort: true } 35 , { field: 'city', title: '城市', 80 } 36 , { field: 'sign', title: '签名' } 37 , { field: 'experience', title: '积分', sort: true, 80 } 38 , { field: 'score', title: '评分', sort: true, 80 } 39 , { field: 'classify', title: '职业', 80 } 40 , { field: 'wealth', title: '财富', sort: true, 135 } 41 ]] 42 , id: 'testReload' 43 , page: true 44 , height: 315 45 , done: function (res) { 46 } 47 }); 48 49 var $ = layui.$, active = { 50 reload: function () { 51 var demoReload = $('#demoReload'); 52 53 //执行重载 54 table.reload('testReload', { 55 page: { 56 curr: 1 //重新从第 1 页开始 57 } 58 , where: { 59 key: { 60 id: demoReload.val() 61 } 62 } 63 }); 64 } 65 }; 66 $('.demoTable .layui-btn').on('click', function () { 67 search = $('#demoReload').val(); 68 $('.layui-table-fixed tbody tr').each(function (i) { 69 var id = $(this).children('td').eq(1).children('div').html(); 70 if (id.indexOf(search) >= 0) { 71 $(this).show() 72 $('.layui-table-main tbody tr').eq(i).show() 73 } else { 74 $('.layui-table-main tbody tr').eq(i).hide() 75 $(this).hide(); 76 } 77 }); 78 }); 79 80 }); 81 </script> 82 83 </body> 84 </html>