做后台一般都要用到模糊查询，这次是用layui前端框架的查询，一开始表格能重载，但就是不是自己想要的结果，因为它把全部数据都重载出来了，等于没查。
按钮代码
1.<div class="demoTable"> 2. 用户名： 3. <div class="layui-inline"> 4. <input class="layui-input" name="User" id="demoUser" autocomplete="off"> 5. </div> 6. 手机号： 7. <div class="layui-inline"> 8. <input class="layui-input" name="phone" id="demoReload" autocomplete="off"> 9. </div> 10. <button class="layui-btn" data-type="reload" id="reload">搜索</button> </div>Js表格
table.render({ elem: '#demo' ,title:'用户信息' ,url: '${ctx}/user/list.do' //数据接口 //,contentType: 'application/json' ,toolbar: '#toolbarDemo' ,totalRow:false //合计行 ,page: true //开启分页 ,cols: [[ //表头 {field: 'numbers', title: '序号', width:80,type:'numbers', fixed: 'left'} ,{type:'checkbox'} ,{field: 'userId', title: '用户id'} ,{field: 'userName',sort:true, title: '用户名'} ,{field: 'nickName', title: '昵称'} ,{field: 'sex',width:80, title: '性别'} ,{field: 'phone', title: '手机号'} ,{field: 'registerTime',width:170, title: '注册时间',templet : function(value){ return layui.util.toDateString(value.time); } } ,{field: 'email', title: 'Email'} ,{field: 'userType', title: '用户类型'} ,{field: 'userTypeId', title: '用户类型Id'} ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'} ]] ,id:'userTable' ,done:function(res,curr,count){ $("[data-field='sex']").children().each(function(){ if($(this).text()=='true'){ $(this).text("男") }else if($(this).text()=='false'){ $(this).text("女") } }); pageCurr=curr; } ,request:{ pageName:'pageNo',//页码的参数名，默认：page limitName:'pageSize'//每页数据量的参数名，默认：limit } /* parseData:function(res){ //res 即为原始返回的数据 return{ "code":res.code, //解析接口状态 "message":res.msg, //解析提示文本 "count": res.count,//解析数据长度 "data":res.data //解析数据列表 } } */ ,limit:10 //每页显示的行数 ,limits:[10,20,30]//每页条数选择项 });
Js实现代码
var $=layui.$,active={ reload:function(){ var user=$('#demoUser').val();//搜索框 var phonel=$('#demoReload').val(); //执行重载 table.reload('userTable',{ method:'post', where:{ userName:user, phone:phonel } }); } }; $('#reload').on('click',function(){ var type=$(this).data('type'); active[type] ? active[type].call(this) : ''; });
执行重载后面的‘userTable’就是自定义表格的ID，url路径就不用指定了，因为重载的时候会自动使用表格加载时的后台路径
Mapping语句
<select id="selectUserCount" resultMap="UserVoResultMap"> SELECT * FROM user INNER JOIN user_type ON user.user_type_id = user_type.user_type_id <where> <if test="userName !=null and userName !=''"> AND user_name like CONCAT(CONCAT('%',#{userName,jdbcType=VARCHAR},'%')) </if> <if test="phone !=null and phone !=''"> AND phone like CONCAT(CONCAT('%',#{phone,jdbcType=VARCHAR},'%')) </if> </where> limit #{start,jdbcType=INTEGER},#{end,jdbcType=INTEGER} </select>
Mapper
/** * 模糊查询 */ List<UserVo> selectUserCount(Map<String,Object> map);
Service
/** * 模糊查询 */ List<UserVo> selectUserCount(Map<String,Object> map,String userName,String phone);
Impl
@Override public List<UserVo> selectUserCount(Map<String,Object> map,String userName,String phone) { // TODO Auto-generated method stub int pageNo=map.get("pageNo")==null ? 1:Integer.valueOf(map.get("pageNo")+""); int pageSize=map.get("pageSize")==null ? 10:Integer.valueOf(map.get("pageSize")+""); //String userName=(String) map.get("userName"); map.put("start", (pageNo - 1)*pageSize); map.put("end", pageSize); map.put("userName", userName); map.put("phone", phone); return userDao.selectUserCount(map); }
控制器
/** * 用户列表 */ @ResponseBody @RequestMapping(value="/list",produces="application/json;charset=UTF-8") public ResultMap<List<UserVo>> list(Map<String,Object> map,String userName,String phone){ List<UserVo> emp=iUserService.selectUserCount(map,userName,phone); int totalCount=iUserService.getTotalRow(map); return new ResultMap<List<UserVo>>(0,"",totalCount,emp); }
实现结果
