毕设之路（二）数据表格实现搜索功能

一开始不知道如何去实现数据表格的搜索，导致后台写了很多很多条件查询的接口，后来发现并不需要那么麻烦，只需要确定好表格中可以查询的条件有哪些，把它们写在一个接口中就可以了，这样还可以实现数据表格的动态搜索，十分方便。
我们在数据表格上方通常会有多个查询条件，如下图

前端的代码就是下面这样：

<fieldset class="table-search-fieldset">
   <legend>搜索信息</legend>
   <div style="margin: 10px 10px 10px 10px">
     <form class="layui-form layui-form-pane" action="">
       <div class="layui-form-item">
         <div class="layui-inline">
           <label class="layui-form-label">用户姓名</label>
           <div class="layui-input-inline">
               <input type="text" name="custName" autocomplete="off" class="layui-input">
           </div>
       </div>
       <div class="layui-inline">
             <label class="layui-form-label">用户性别</label>
             <div class="layui-input-inline">
                 <input type="text" name="custSex" autocomplete="off" class="layui-input">
             </div>
        </div>
        <div class="layui-inline">
             <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
         </div>
        </div>
     </form>
  </div>
</fieldset>

如何实现动态条件查询呢？（以前的我总是一个条件一个接口，现在的我被迫聪明了，只要确定好有哪些条件，写在一个方法内部就好了。）

    @GetMapping("/query")
    public ResultMap selectCustomersByPageNum(
            @RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum,
            @RequestParam(value = "pageSize", defaultValue = "10") Integer pageSize,
            @RequestParam(value = "custName", required = false) String custName,
            @RequestParam(value = "custSex", required = false) String custSex) {
        return ResultMap.success().addObject("customers", customerService.selectCustomersByPageNum(pageNum, pageSize, custName, custSex));
    }

这样在 JS 中就不用重新写多几个查询请求了，直接复用数据表格就好了，很强大。

// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
    var result = JSON.stringify(data.field);
    layer.alert(result, {
        title: '最终的搜索信息'
    });
    //执行搜索重载
    table.reload('currentTableId', {
        page: {
            curr: 1
        }
        , where: {
            "custName": data.field.custName,
			"custSex": data.field.custSex
        }
    }, 'data');
    return false;
});

上面的 data 就是 form 表单中所有表单标签的键值对{name:value, name:value}，也可以不使用 form，直接用 id 属性去查找每个标签的值：$("#id").val()，看个人喜好，不过核心在于懒。