layui表格使用后,那么同时也需要按时间内容等搜索功能,这里就一个实例来看看layui如何根据搜索条件来重载数据表格的。
<div class="layui-warp"> <div class="py_table layui-form"> <div class="layui-inline" style="width: 200px;"> <select name="cid" id="cid"> <option value="">选择类别</option> {% for d in cms %} <option value="{{ d }}">{{ cms[d] }}</option> {% endfor %} </select> </div> <div class="layui-input-inline" style="min-width: 300px;"> <input type="text" class="layui-input" name="timeperiod" id="timeperiod" autocomplete="off" placeholder="选择要查询的时间范围"> </div> <button class="layui-btn" data-type="reload">搜索</button> </div> <table id="pylist" lay-filter="pylist"></table> </div> <script> layui.use(['form', 'laydate', 'table', 'layer', 'jquery'], function(){ var form = layui.form ,laydate = layui.laydate ,table = layui.table ,layer = layui.layer ,$ = layui.jquery; table.render({ elem: '#pylist' ,url: '{{ url_for("tool.ajaxPy") }}' //数据接口 ,page: true //开启分页 // ,done: function(res, curr, count){ // console.log(res); // } ,cols: [[ //表头 // {checkbox: true, fixed: true} {field: 'cid', title: 'Cid', width:'9%'} ,{field: 'range', title: '年龄', width:'8%'} ,{field: 'gender', title: '性别', width:'8%'} ,{field: 'image_id', title: '图片Id', width:180} ,{field: 'picture', title: '图片', width:'20%'} ,{field: 'timestamp', title: '时间', width:'16%', 'fixed':'right'} ]] ,limit: "{{ page_limit }}" ,id: 'pyReload' }); var $ = layui.$, active = { reload: function(){ var demoReload = $('#demoReload'); //执行重载 table.reload('pyReload', { page: { curr: 1 //重新从第 1 页开始 } ,where: { cid: $("#cid option:selected").val(), timeperiod: $("#timeperiod").val() } }); // console.log($("#camera_id option:selected").val()) } }; laydate.render({ elem: '#timeperiod' ,type: 'datetime' ,max: 1 ,range: true }); $('.py_table .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); layer.close(layer.index); }); </script>
这里演示了一个下拉选框和一个时间范围的条件,重载表格主要是在active对象中回调函数中对表格进行重载,其中我们还可以传递几个条件进去获取对应条件的数据