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}
        <span class="token punctuation">]<span class="token punctuation">]
        <span class="token punctuation">, id<span class="token operator">: <span class="token string">'testReload'
        <span class="token punctuation">, page<span class="token operator">: <span class="token boolean">true
    <span class="token punctuation">}<span class="token punctuation">)<span class="token punctuation">;
    var $ <span class="token operator">= layui<span class="token punctuation">.$<span class="token punctuation">, active <span class="token operator">= <span class="token punctuation">{
        reload<span class="token operator">: function <span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
            var username <span class="token operator">= $<span class="token punctuation">(<span class="token string">'#demoReload'<span class="token punctuation">)<span class="token punctuation">;
            console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(username<span class="token punctuation">.<span class="token function">val<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">)<span class="token punctuation">;
            <span class="token comment">//执行重载
            table<span class="token punctuation">.<span class="token function">reload<span class="token punctuation">(<span class="token string">'testReload'<span class="token punctuation">, <span class="token punctuation">{
                page<span class="token operator">: <span class="token punctuation">{
                    curr<span class="token operator">: <span class="token number">1 <span class="token comment">//重新从第 1 页开始
                <span class="token punctuation">}
                <span class="token punctuation">, where<span class="token operator">: <span class="token punctuation">{
                    username<span class="token operator">: username<span class="token punctuation">.<span class="token function">val<span class="token punctuation">(<span class="token punctuation">)
                <span class="token punctuation">}
            <span class="token punctuation">}<span class="token punctuation">, <span class="token string">'data'<span class="token punctuation">)<span class="token punctuation">;
        <span class="token punctuation">}
    <span class="token punctuation">}<span class="token punctuation">;
    $<span class="token punctuation">(<span class="token string">'.demoTable .layui-btn'<span class="token punctuation">)<span class="token punctuation">.<span class="token function">on<span class="token punctuation">(<span class="token string">'click'<span class="token punctuation">, function <span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
        var type <span class="token operator">= $<span class="token punctuation">(<span class="token keyword">this<span class="token punctuation">)<span class="token punctuation">.<span class="token function">data<span class="token punctuation">(<span class="token string">'type'<span class="token punctuation">)<span class="token punctuation">;
        active<span class="token punctuation">[type<span class="token punctuation">] <span class="token operator">? active<span class="token punctuation">[type<span class="token punctuation">]<span class="token punctuation">.<span class="token function">call<span class="token punctuation">(<span class="token keyword">this<span class="token punctuation">) <span class="token operator">: <span class="token string">''<span class="token punctuation">;
    <span class="token punctuation">}<span class="token punctuation">)<span class="token punctuation">;
<span class="token punctuation">}<span class="token punctuation">)<span class="token punctuation">;

</script>

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