<sectionclass="layui-fluid"><asideclass="layui-card"id="queryDiv"><divclass="layui-elem-quote"><formclass="layui-form"><divclass="layui-inline"><label>号码:</label><divclass="layui-input-inline"><inputclass="layui-input"id="phone"type="text"></div><aclass="layui-btnsearch_btn"data-type="reload">搜索</a></div></form></div></aside><articleclass="my-table"><tableid="tableList"lay-filter="tableList"></table></article><scripttype="text/html"id="toolbarDemo"><divclass="layui-btn-container"id="tableNav"><buttontype="button"class="layui-btnlayui-btn-sm"id="add">新增用户</button><buttontype="button"class="layui-btnlayui-btn-smlayui-btn-danger"id="del">删除用户</button></div></script></section>2. 对应的js

layui.use(['form','layer','table'],function(){varform=layui.form,layer=parent.layer===undefined?layui.layer:top.layer,table=layui.table;//加载提示varloadingMsg=layer.msg('数据请求中',{icon:16,scrollbar:false,time:0});//初始化表格及数据vartableIns=table.render({elem:'#tableList',url:'sysUser/list',where:{phone:$("#phone").val()},cellMinWidth:95,toolbar:"#toolbarDemo",//让工具栏左侧显示默认的内置模板defaultToolbar:['filter'],//工具栏右侧的图标按钮['filter','print','exports']even:true,//开启斑马线效果page:true,//height:"full-125",//放置在页面底部limits:myLimits,limit:myLimit,id:"tableListTable",cols:[[{field:'userId',title:'ID',width:100,align:"center"},{field:'userName',title:'用户名',minWidth:150,align:"center"},{field:'state',title:'状态',width:80,align:"center",templet:stateFormat},{field:'sex',title:'性别',width:80,align:"center",templet:sexFormat},{field:'remark',title:'备注',align:"center"}]],done:function(res,curr,count){//关闭提示层layer.close(loadingMsg);//绑定表格工具栏按钮的触发事件bindTableToolbarFunction();}});//====================定义常规函数====================//刷新表格数据functionreloadTable(){//加载提示loadingMsg=layer.msg('数据请求中',{icon:16,scrollbar:false,time:0});//重新加载数据table.reload("tableListTable",{page:{curr:1//重新从第1页开始},where:{phone:$("#phone").val()},done:function(res,curr,count){layer.close(loadingMsg);bindTableToolbarFunction()}});}//搜索【此功能需要后台配合，所以暂时没有动态效果演示】$(".search_btn").on("click",function(){//刷新表格reloadTable();});//格式化显示用户状态信息functionstateFormat(d){varstr;if(d.state==0){str='<spanclass="fontColor_red">禁用</span>';}elseif(d.state==1){str='<spanclass="fontColor_green">正常</span>';}else{str='<spanclass="fontColor_darkOrange">锁定</span>';}returnstr;}//格式化显示sex信息functionsexFormat(d){varstr;if(d.sex==0){str='女';}elseif(d.sex==1){str='男';}else{str='<spanclass="fontColor_red">未知</span>';}returnstr;}//====================定义事件处理====================//绑定事件集合处理(表格加载完毕和表格刷新的时候调用)functionbindTableToolbarFunction(){//绑定新增用户事件$("#add").on("click",function(){layer.alert("新增用户被调用了",{icon:6});});//绑定删除用户事件$("#del").on("click",function(){layer.alert("删除用户被调用了",{icon:6});});}})