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;
    }