layui数据表格重载的方法

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/679.html

我要评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。