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对象中回调函数中对表格进行重载,其中我们还可以传递几个条件进去获取对应条件的数据
内容版权声明:除非注明,否则皆为本站原创文章。
转载注明出处:https://sulao.cn/post/676
评论列表