layUI实现列表查询功能

获得可以直接使用本地的数据文件进行列表数据渲染，但，我们会发现，官网ctr c ctr v过来的代码在做查询时每次看起来都有列表刷新的动作，但实际操作无效，百度了一大圈也没找到具体的原因，无奈继续回去看官网，后面总结出只有一点，也是大家比较容易忽略的一点：

官网说在查询时的全球资源定位器(统一资源定位符)必须设置异步接口，所以，如果我们不借助后台看起来这个效果好像是单靠前端是出不来，但，为了本地演示，这里写了一个很低的的方法，单靠显示()隐藏()方法来实现查询效果（效果演示可以单不建议实际开发中使用该方法)

以下代码粘贴复制便可直接使用：

div class=' demoTable '搜索ID:div class=' layui-inline ' input class=' layui-input ' name=' ID ' ID=' demoReload ' autocomplete=' off '/div button class=' layui-BTN '数据类型='重新加载'搜索/button/div table class=' layui-hide ' id=' LAY _ table _ user ' LAY-filter=' user '/table script src=' http : js/layui/layui。js ' charset=' utf-8 '/script script layui。使用(' table '，function(){ var table=layui。桌子；//方法级渲染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 3:用户名，宽度：80}，{field:'sex '，title: '性别，width:80，sort: true}，{field:'city '，title: '城市，宽度：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 //重新从第一页开始},其中： { key : { id : demoreload。val()} })；} };$('.可降级拉伊-BTN ' .on('click '，function(){ search=$(' # Dermeload ').val()；$('.layui-table-固定t型车身tr’).每个（函数(i){ var id=$(this)).儿童(' td ').等式(1)。儿童(' div ').html()；if(id。indexof(search)=0){ $(this).show() $(' .layui-table-主体t ' tr ' .方程式(I ).show() }else{ $(' .layui-table-主体t ' tr ' .方程式(I ).hide() $(this).hide()；} });});});/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。