layUI数据表格做查询搜索

layUI的搜索查询功能很强大，看代码：

1.定义查询栏

 <div class="layui-inline">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" name="begintime" class="layui-input" id="beginTime" placeholder="yyyy-MM-dd HH:mm:ss">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" name="endtime" class="layui-input" id="endTime" placeholder="yyyy-MM-dd HH:mm:ss">
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="LAY-user-front-search">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                搜索
            </button>
        </div>

2.定义搜索按钮的监听事件

  //监听搜索，注意，LAY-user-front-search 是搜索按钮的 lay-filter 的属性值
        form.on('submit(LAY-user-front-search)', function(data){
            var field = data.field;   //得到搜索栏的所有的值

            //执行重载
            table.reload('demo', {
                where: field     //传给后台数据并重载
            });
        });

3.后台代码，按照name值接受参数就可以了

 @RequestMapping("/getInfo")
    public Map<String, Object> getDzjz(@RequestParam Integer page, @RequestParam Integer limit,
                                       @RequestParam(required = false) String begintime,
                                       @RequestParam(required = false) String endtime,
                                       @RequestParam(required = false) String badw){

        Page<Dzjz> p = dzjzService.getInfo(page,limit,begintime,endtime,badw);
        Map<String,Object> map = new HashMap<String,Object>();
        map.put("code","0");
        map.put("msg","成功");
        map.put("count",p.getTotal());
        map.put("data",p.getRecords());
        return map;
    }