layui数据表格重载方法实现搜索功能

编程的过程就是一个不断发现问题，解决问题的过程，在用ssm框架和layui开发的过程中，在使用layui数据表格重载方法实现搜索功能中遇到问题，下面贴出我的解决方法。

一、dao层方法

    //按username搜索
    List<User> querySerchByusername(@Param("username") String username);

二、dao层xml

    <!--按username模糊搜索-->
    <select id="querySerchByusername" resultType="User">
        select * from mycard.user
        <if test="username!=null and username != ''">
            where username like concat("%",#{username},"%")
        </if>
    </select>

三、controller层

LayuiTypeJson是自定义的工具类，第一篇文章里有，这里不再说明

//所有用户搜索功能
    @RequestMapping("/alluserserch")
    public LayuiTypeJson<User> serch(@RequestParam(defaultValue = "") String username) {
        List<User> list = null;
        if (username.equals("")) {
            list = userservice.queryAllUser();
        }
        if (!username.equals("")) {
            list = userservice.querySerchByusername(username);
        }
        LayuiTypeJson<User> layuiTypeJson = new LayuiTypeJson<User>();
        layuiTypeJson.setCount(list.size());
        layuiTypeJson.setData(list);
        return layuiTypeJson;
    }

四、前台页面

注意：name属性需要和查询的字段名称保持一致

<div class="demoTable" style="float:right">
            <div class="layui-inline">
                <input class="layui-input" name="username" id="demoReload" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
</div>

五、layui方法

这里遇到的坑有几个：
1、注意要给table一个id，用于重载，如：id: ‘testReload’。
2、给后台传值的时候要把layui源码中的key去掉。

<script>
    layui.use('table', function () {
        var table = layui.table
            , form = layui.form;
        table.render({
            elem: '#demo'
            , url: '/user/alluserserch'
            , cellMinWidth: 80
            , cols: [[
                {type: 'numbers'}
                , {type: 'checkbox'}
                , {field: 'username', title: '用户名', width: 200, sort: true}
                , {field: 'password', title: '密码'}
                , {field: 'role', title: '角色'}
                , {field: 'email', title: '邮箱'}
                , {field: 'sex', title: '性别'}
                , {field: 'age', title: '年龄'}
                , {field: 'tel', title: '电话'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
]]

, id: 'testReload'

, page: true

});

var $ = layui.$, active = {

reload: function () {

var username = $('#demoReload');

console.log(username.val());

//执行重载

table.reload('testReload', {

page: {

curr: 1 //重新从第 1 页开始

}

, where: {

username: username.val()

}

}, 'data');

}

};

$('.demoTable .layui-btn').on('click', function () {

var type = $(this).data('type');

active[type] ? active[type].call(this) : '';

});

});

</script>

功能已经成功实现，有问题的小伙伴可以在评论区留言，大家一起探讨。