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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

失落的猫头鹰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值