背景

在我们使用数据表格时候往往需要用到查询功能，以往常开发经验，点击【查询】立马$.ajax搞起来，但在这就面临一个问题，ajax拿到了数据，怎么去渲染表格，使用table.render(‘表容器id’,{data:res.data})渲染，但表格参数中的url仍然会执行（这样会有两次渲染，后一次还覆盖了我们的查询结果），这肯定不是贤心的设计初衷，因此，这里我们需要使用框架中的重载表格重载方法参数-> where
框架正是将我们的查询条件传给重载参数 where,通过重载时带上我们自定义的参数 、默认参数page、limit去拿到我们需要的结果再来渲染数据表格（一次渲染），得到的正是我们想要的结果

例子

    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane" action="" autocomplete="off">
                <div class="layui-form-item">
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                            <i class="layui-icon layui-icon-search"></i>
                            查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

js部分如下

   form.on('submit(user-query)', function(obj) {
       table.reload('database-table', {
           where:obj.field
       })
       return false;
   });

总结

使用框架时还是要耐心读完文档~