layui实现模糊查询

前端使用layui，后端使用Java，实现模糊查询，比较简单，看代码就能懂。
前端：

html代码：

<div class="layui-inline">
	<div class="layui-input-inline">
		<input type="text" class="layui-input searchVal" placeholder="请输入搜索的内容"/>
	</div>
		<a class="layui-btn search_btn" data-type="reload">搜索</a>
</div>

js代码：

//列表
var tableIns = table.render({
    elem: '#userList',
    url : '/findAllUser',
    cellMinWidth : 95,
    page : true,
    height : "full-125",
    limit : 20,
    limits:[10,15,20,25],
    id : "userListTable",
    cols:[[
        {type: 'checkbox', fixed:'left', },
        {type:'numbers',title:'序号'},
        {field: 'userId', title: '用户ID', width:80, align:"center"},
        {field: 'userName', title: '账号',align:"center"},
        {field: 'userPassword', title: '密码',align:'center'},
        {field: 'createTime', title: '注册时间',width:180, align:'center'},
        {field: 'userType', title:'身份',width:140, align:'center'},
        {title: '操作',  templet:'#newsListBar',width:120,fixed:"right",align:"center"}
   	]]
});

//搜索
$(".search_btn").on("click",function(){
    if($(".searchVal").val() != ''){
        table.reload("userListTable",{
            url: '/selectListByCondition',
            page: {
                curr: 1 //重新从第 1 页开始
            },
            where: {
                condition: $(".searchVal").val() //搜索的关键字
            }
        })
    }else{
        layer.msg("请输入搜索的内容");
    }
});

后端：
控制层代码：

//根据搜索框内容查询列表数据
@RequestMapping("/selectListByCondition")
public ResultVO selectListByCondition(@RequestParam(name = "page", required = false) int page, String condition){
	//获取分页信息
    PageInfo<User> userPageInfo = userService.findAll(page,10);
    //获取数据的总条数
    int total=(int)userPageInfo.getTotal();
    //设置总条数
    ResultVO resultVO =  new ResultVO();
    resultVO.setCount(total);

    List<User> userList = userService.findListByCondition(condition);
    resultVO.setUserList(userList);
    return resultVO;
}

返回值是我自定义的工具类（只贴一下参数）：

@Data
public class ResultVO<T> {

    private Integer code=0;

    private Integer count;

    private Integer status=200;

    private  String msg="success";

    @JsonProperty("data")
    private List<User> userList;

业务层代码：

//根据搜索框搜索对应列表数据
@Override
public List<User> findListByCondition(String condition){
    return userMapper.findListByCondition(condition);
}

public PageInfo<User> findAll(int pageNum, int pageSize) {
    //将参数传给这个方法就可以实现物理分页了，非常简单。
    PageHelper.startPage(pageNum, pageSize);
    List<User> userList = userMapper.findAllUser();
    PageInfo result = new PageInfo(userList);
    return result;
}

持久化层代码：

//查询所有用户
List<User>  findAllUser();

//根据搜索框内容查询列表数据
List<User> findListByCondition(String condition);

xml代码：

<!--查询所有用户-->
<select id="findAllUser"  resultType="com.test.tourism.model.User">
	select * from user
</select>

<!-- 根据搜索框搜索列表数据 -->
<select id="findListByCondition"  resultType="com.test.tourism.model.User">
	select * from user where user_name like '%' #{condition} '%'
</select>

实现效果：